kawa/Ready2Blob
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

feat(09-02): rebuild StepIndicator with MD3 circles and connectors

Browse Source 
- Replace text breadcrumbs with numbered circles + connector lines
- Completed steps show checkmark, are clickable buttons with label text
- Active step highlighted with border-primary and bg-primary/10
- Future steps muted with border-outline and text-on-surface-container/40
- Connector lines filled bg-primary for completed, bg-outline for future
- All inline style={{}} props removed, no hardcoded color values
- handleStepClick logic preserved: SET_REMOTE_PARAMS({}) before SET_STEP(0)
- All 5 WIZD-03 tests pass without modification
This commit is contained in:
kawa
2026-04-01 09:19:06 +02:00
parent a6c2ec7292
commit b70484423e
1 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wizard/StepIndicator.tsx
+51 -28
View File
@@ -1,6 +1,7 @@
// src/components/wizard/StepIndicator.tsx
// Breadcrumb navigation — 1.Backend > 2.Remote Config > 3.Deployment > 4.Review
// Completed steps are clickable. Clicking step 0 also clears remote.params (SET_REMOTE_PARAMS({})).
// MD3 visual step indicator — numbered circles with connector lines.
// Completed steps show checkmark and are clickable buttons.
// Clicking step 0 dispatches SET_REMOTE_PARAMS({}) then SET_STEP(0) to reset remote params.
// CRITICAL: never dispatches RESET — deployment options must be preserved on back navigation.
import { useWizard } from '../../store/context';
@@ -22,33 +23,55 @@ export function StepIndicator() {
return (
<nav aria-label="Wizard steps">
{STEP_LABELS.map((label, i) => {
const isCompleted = i < currentStep;
const isActive = i === currentStep;
<ol className="flex items-center w-full">
{STEP_LABELS.map((label, i) => {
const isCompleted = i < currentStep;
const isActive = i === currentStep;
return (
<span key={i}>
{i > 0 && <span aria-hidden="true"> › </span>}
{isCompleted ? (
<button
type="button"
onClick={() => handleStepClick(i)}
style={{ fontWeight: 'normal' }}
>
✓ {i + 1}. {label}
</button>
) : isActive ? (
<span style={{ fontWeight: 'bold' }}>
{i + 1}. {label}
</span>
) : (
<span style={{ color: '#999' }}>
{i + 1}. {label}
</span>
)}
</span>
);
})}
return (
<li key={i} className="flex items-center flex-1 last:flex-none">
{/* Step circle + label */}
<div className="flex flex-col items-center shrink-0">
{isCompleted ? (
<button
type="button"
onClick={() => handleStepClick(i)}
aria-label={`Go to step ${i + 1}: ${label}`}
className="flex flex-col items-center gap-1 group focus-visible:outline-none"
>
<span className="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-sm font-medium group-focus-visible:ring-2 group-focus-visible:ring-primary/50">
&#10003;
</span>
<span className="text-xs text-primary">{label}</span>
</button>
) : isActive ? (
<div className="flex flex-col items-center gap-1">
<span className="w-8 h-8 rounded-full border-2 border-primary bg-primary/10 text-primary font-bold flex items-center justify-center text-sm">
{i + 1}
</span>
<span className="text-xs text-primary font-semibold">{label}</span>
</div>
) : (
<div className="flex flex-col items-center gap-1">
<span className="w-8 h-8 rounded-full border-2 border-outline text-on-surface-container/40 flex items-center justify-center text-sm">
{i + 1}
</span>
<span className="text-xs text-on-surface-container/40">{label}</span>
</div>
)}
</div>
{/* Connector line between steps */}
{i < STEP_LABELS.length - 1 && (
<div
aria-hidden="true"
className={`flex-1 h-0.5 mx-2 mb-4 ${isCompleted ? 'bg-primary' : 'bg-outline'}`}
/>
)}
</li>
);
})}
</ol>
</nav>
);
}