Stepper

import SwiftUI
import EandTokens

// Segmented step progress: 6pt-tall pills, 4pt gap, completed ones filled.
struct Stepper: View {
  let steps: Int; let progress: Int
  var body: some View {
    HStack(spacing: EandSpacing.xs) {
      ForEach(0..<steps, id: \.self) { i in
        Capsule()
          .fill(i < progress ? EandColor.stepperDefaultSelected : EandColor.stepperDefaultDefault)
          .frame(height: 6).frame(maxWidth: .infinity)
      }
    }
  }
}

When to use

• Use to show where the user is in a multi-step flow. The TopBar uses it as its .topbar-stepper bottom element.
• Use inverse on brand-red and midnight surfaces.
• Don't use for a continuous quantity — use ProgressBar or PlanUsageBar.

steps is clamped to 2–8, as Figma defines it, and progress (the completed segments) to 0–steps.

Props

Design

Figma source: stepper — etisalat Consumer App DSL V1.2

• A 6px row of equal-width pill segments (border-radius/9), spaced by spacing/xs (4px).
• Colours are stepper/{default,inverse}/{default,selected}: completed segments take selected, the rest default.
• The stepper-rtl set is a mirror; the row follows the document direction.