feat(blocks): add VoteWidget for review desk reader poll

Static markup-only component for the 'which draft would you ship?' reader poll. Renders the offline panel when the vote service is unreachable, otherwise the two-button group with tally counts and the 'one vote per visitor' note. Tally fetching and click handling are task 16. Preserves every CSS hook asserted by scripts/verify.mjs: .vote-widget, .vote-buttons, [aria-pressed=true]. The role='group' / aria-label on the inner cluster carries the state to assistive tech — colour alone is not enough and is asserted in the task brief. Did not: introduce the vote-service fetch logic (task 16); render the 'unavailable' surface from inside the component (the page decides based on API reachability); add new tokens.
2026-09-05 07:09:54 +00:00
parent c159f4cdb8
commit 29a5ca0035
1 changed files with 146 additions and 0 deletions
@@ -0,0 +1,146 @@
+---
+// VoteWidget — the "which draft would you ship?" reader poll.
+//
+// Static markup only. The fetch to vote-service, the localStorage voter id,
+// and the click handler are task 16's job. The button toggle state lives
+// here so the layout matches the legacy page at first render.
+//
+// CSS hooks asserted by scripts/verify.mjs that must survive in the new
+// architecture:
+//   .vote-widget        — the outer wrapper
+//   .vote-buttons       — the button row
+//   [aria-pressed=true] — the selected state
+//
+// The aria-label / role="group" on the inner cluster carries the state to
+// assistive tech — colour alone is not enough. This is asserted in the
+// task brief and lives in the same hook surface.
+
+interface VoteTally {
+  original: number;
+  improved: number;
+}
+
+interface Props {
+  /** Skill id this widget votes for. */
+  skillId: string;
+  /** Current vote tallies. Zeros render as "0 · 0%". */
+  tally: VoteTally;
+  /** The current visitor's vote, if any. */
+  youVote: 'original' | 'improved' | null;
+  /** When the vote service is unreachable, render the offline panel. */
+  unavailable?: boolean;
+}
+
+const { skillId, tally, youVote, unavailable = false } = Astro.props;
+const total = (tally.original || 0) + (tally.improved || 0);
+const share = (count) => (total ? Math.round((count / total) * 100) : 0);
+---
+
+{
+  unavailable ? (
+    <section class="vote-widget" aria-label="Vote unavailable">
+      <span>READER VOTE</span>
+      <p>Voting is offline right now — the vote service is not configured or unreachable.</p>
+    </section>
+  ) : (
+    <section class="vote-widget" aria-label="Vote on this review" data-skill={skillId}>
+      <span>WHICH DRAFT WOULD YOU SHIP?</span>
+      <div class="vote-buttons" role="group" aria-label="Cast your vote">
+        <button type="button" data-vote="original" aria-pressed={youVote === 'original'}>
+          Original
+          <b>
+            {tally.original || 0} · {share(tally.original || 0)}%
+          </b>
+        </button>
+        <button type="button" data-vote="improved" aria-pressed={youVote === 'improved'}>
+          Improved draft
+          <b>
+            {tally.improved || 0} · {share(tally.improved || 0)}%
+          </b>
+        </button>
+      </div>
+      <p class="vote-note">
+        {youVote
+          ? `You voted ${youVote === 'original' ? 'original' : 'improved draft'}. Pick the other option to change it.`
+          : 'One vote per visitor, tracked by network source.'}
+      </p>
+    </section>
+  )
+}
+
+<style>
+  /* The widget surface: light grey-green panel with a gold left border,
+     the "which draft would you ship?" eyebrow, and a 2-up button row. */
+  .vote-widget {
+    display: grid;
+    gap: 10px;
+    margin: 1px 0 25px;
+    padding: 18px 22px;
+    color: var(--ink);
+    /* Legacy uses a soft green-grey panel; --paper is the closest canonical
+       token and loses the green tint. Visual fidelity gap reported. */
+    background: var(--paper);
+    border-left: 4px solid var(--gold);
+  }
+
+  .vote-widget > span {
+    color: var(--blue);
+    font:
+      700 10px ui-monospace,
+      monospace;
+    letter-spacing: 0.1em;
+  }
+
+  /* The button row: hairline-separated cells, gap:1px over the line
+     colour is the house "fake border" trick. */
+  .vote-buttons {
+    display: flex;
+    gap: 1px;
+    background: var(--line);
+  }
+
+  .vote-buttons button {
+    flex: 1;
+    display: grid;
+    gap: 6px;
+    padding: 12px 14px;
+    color: var(--ink);
+    background: var(--paper);
+    border: 1px solid var(--line);
+    cursor: pointer;
+    text-align: left;
+    font: 13px/1.3 inherit;
+  }
+
+  .vote-buttons button b {
+    color: var(--muted);
+    font: var(--step-0) monospace;
+  }
+
+  /* The selected state: dark surface, paper text, gold tally. */
+  .vote-buttons button[aria-pressed='true'] {
+    color: var(--paper);
+    background: var(--ink);
+  }
+
+  .vote-buttons button[aria-pressed='true'] b {
+    color: var(--gold);
+  }
+
+  .vote-buttons button:focus-visible {
+    outline: 3px solid var(--red);
+    outline-offset: 2px;
+  }
+
+  .vote-note {
+    margin: 0;
+    color: var(--muted);
+    font-size: var(--step-0);
+  }
+
+  @media (max-width: 800px) {
+    .vote-buttons {
+      flex-direction: column;
+    }
+  }
+</style>