Streamline issue wizard and make selections explicit

2026-09-06 21:44:44 +12:00
parent 1851fa9753
commit 8d720de500
6 changed files with 681 additions and 321 deletions
@@ -0,0 +1,43 @@
+'use client'
+
+import { useEffect, useRef, type ReactNode } from 'react'
+
+export default function IssueFlowStep({
+  number, title, summary, active, complete, onEdit, children,
+}: {
+  number: number
+  title: string
+  summary: string
+  active: boolean
+  complete: boolean
+  onEdit: () => void
+  children: ReactNode
+}) {
+  const heading = useRef<HTMLHeadingElement>(null)
+  useEffect(() => {
+    if (!active || number === 1) return
+    heading.current?.focus({ preventScroll: true })
+    heading.current?.scrollIntoView({ block: 'nearest', behavior: 'instant' })
+  }, [active, number])
+
+  if (!active && !complete) return null
+  return (
+    <section className={`issue-procedure-step ${active ? 'is-current' : 'is-complete'}`} aria-label={title}>
+      {active ? (
+        <>
+          <div className="issue-flow-heading">
+            <span className="issue-step-number" aria-hidden="true">{String(number).padStart(2, '0')}</span>
+            <h2 ref={heading} tabIndex={-1}>{title}</h2>
+          </div>
+          <div className="issue-procedure-content">{children}</div>
+        </>
+      ) : (
+        <button type="button" className="issue-step-summary" onClick={onEdit} aria-label={`Change ${title}: ${summary}`}>
+          <span className="issue-step-number" aria-hidden="true">✓</span>
+          <span className="issue-step-summary-copy"><small>{title}</small><strong>{summary}</strong></span>
+          <span className="issue-step-change">Change</span>
+        </button>
+      )}
+    </section>
+  )
+}