Component request- ProgressIndicator

[leahwangcloudflare]

Overview

Request to add a ProgressIndicator (or ProgressCircle) component to the Kumo design system, migrating the current local implementation from Magic Networks.

---

1. Usage Context

Primary Use Case: Onboarding progress indicator

Location: Magic Networks Overview page (OverviewMain.tsx:77-113)

Component Hierarchy:

OverviewMain
└── "Get started with Magic Transit" card
    └── OverviewProgressLabel component
        ├── Conditional icon rendering:
        │   ├── All completed → CheckCircleIcon (filled)
        │   ├── Not started → CircleDashedIcon (empty)
        │   └── In progress → ProgressCircleIcon (partial)
        └── Text counter: "X / Y" completed steps

Behavior:

• Progress calculated as completedCount / totalCount
• Shows 6 segments that progressively fill based on completion percentage
• Used to track Magic Transit onboarding checklist (IP prefixes, tunnels, etc.)

---

2. Screenshots/GIF

---