This PR implements two separate components for progress tracking: Progress (progress bar) and Stepper (step indicator). These components are part of the component implementation plan and will be used in future components like Modal for multi-step workflows.
The Progress component displays a 3-segment progress bar with support for partial fills, showing progress states from 1-0 through 3-2. The Stepper component displays a series of dots indicating the current active step in a multi-step process.
Both components follow the container/presentation pattern, use design tokens, and include comprehensive tests and Storybook stories.
Changes
Progress Component (app/components/Progress/)
Created Progress.container.tsx - Container logic with default state handling
Created Progress.view.tsx - Presentational component with 3-segment progress bar rendering
Created Progress.types.ts - TypeScript interfaces for ProgressBarState (1-0 through 3-2)
Created index.tsx - Default export
Implemented complex fill logic:
1-X states: First section fills from 1/6 to 6/6 (where X is 0-5)
2-X states: First section full, second section fills 0/3, 1/3, or 2/3
3-X states: First two sections full, third section fills 0/3, 1/3, or 2/3
Height fixed at 8px with proper rounding (rounded edges on outermost segments only)
Partial fills in third section (3-1, 3-2) have flat right edge while container retains rounded edge
Stepper Component (app/components/Stepper/)
Created Stepper.container.tsx - Container logic with default values (5 steps, active step 1)
Created Stepper.view.tsx - Presentational component with dot indicators
Created Stepper.types.ts - TypeScript interfaces for StepperProps
Created index.tsx - Default export
Fixed 12px dot size using var(--color-surface-inverse-secondary)
Active dot: opacity-100, Inactive dots: opacity-30
Only the active step dot is filled (not progressive)
Tests
Created tests/components/Progress.test.tsx - Unit tests with componentTestSuite, accessibility tests, and behavioral tests for all progress states
Created tests/components/Stepper.test.tsx - Unit tests with componentTestSuite, accessibility tests, and behavioral tests for step rendering
Storybook Stories
Created stories/Progress.stories.js - Stories for Default and AllStates (1-0 through 3-2)
Created stories/Stepper.stories.js - Stories for Default and AllStates (active steps 1-5)
Components Preview Page
Updated app/components-preview/page.tsx - Added sections for Progress and Stepper components with all states displayed
# Implement Progress and Stepper components (CR-46)
## Overview
This PR implements two separate components for progress tracking: **Progress** (progress bar) and **Stepper** (step indicator). These components are part of the component implementation plan and will be used in future components like Modal for multi-step workflows.
The Progress component displays a 3-segment progress bar with support for partial fills, showing progress states from 1-0 through 3-2. The Stepper component displays a series of dots indicating the current active step in a multi-step process.
Both components follow the container/presentation pattern, use design tokens, and include comprehensive tests and Storybook stories.
## Changes
- **Progress Component** (`app/components/Progress/`)
- Created `Progress.container.tsx` - Container logic with default state handling
- Created `Progress.view.tsx` - Presentational component with 3-segment progress bar rendering
- Created `Progress.types.ts` - TypeScript interfaces for ProgressBarState (1-0 through 3-2)
- Created `index.tsx` - Default export
- Implemented complex fill logic:
- 1-X states: First section fills from 1/6 to 6/6 (where X is 0-5)
- 2-X states: First section full, second section fills 0/3, 1/3, or 2/3
- 3-X states: First two sections full, third section fills 0/3, 1/3, or 2/3
- Height fixed at 8px with proper rounding (rounded edges on outermost segments only)
- Partial fills in third section (3-1, 3-2) have flat right edge while container retains rounded edge
- **Stepper Component** (`app/components/Stepper/`)
- Created `Stepper.container.tsx` - Container logic with default values (5 steps, active step 1)
- Created `Stepper.view.tsx` - Presentational component with dot indicators
- Created `Stepper.types.ts` - TypeScript interfaces for StepperProps
- Created `index.tsx` - Default export
- Fixed 12px dot size using `var(--color-surface-inverse-secondary)`
- Active dot: opacity-100, Inactive dots: opacity-30
- Only the active step dot is filled (not progressive)
- **Tests**
- Created `tests/components/Progress.test.tsx` - Unit tests with componentTestSuite, accessibility tests, and behavioral tests for all progress states
- Created `tests/components/Stepper.test.tsx` - Unit tests with componentTestSuite, accessibility tests, and behavioral tests for step rendering
- **Storybook Stories**
- Created `stories/Progress.stories.js` - Stories for Default and AllStates (1-0 through 3-2)
- Created `stories/Stepper.stories.js` - Stories for Default and AllStates (active steps 1-5)
- **Components Preview Page**
- Updated `app/components-preview/page.tsx` - Added sections for Progress and Stepper components with all states displayed
- **Design Tokens Used**
- Spacing: `var(--spacing-scale-008)`, `var(--spacing-scale-012)`
- Colors: `var(--color-content-default-brand-primary)`, `var(--color-surface-default-secondary)`, `var(--color-surface-inverse-secondary)`
- Radius: `var(--radius-full)`
- Height: 8px for Progress, 12px for Stepper dots
## Screenshots
<img width="237" alt="Screenshot 2026-02-02 at 11.45.24 AM.png" src="attachments/31a835b4-9037-4a42-8eb5-43b71e865162">
<img width="662" alt="Screenshot 2026-02-02 at 11.45.58 AM.png" src="attachments/2391da40-3fd7-408b-ade6-b374895a8e56">
## How to Test
1. **Run Storybook:**ash
npm run storybook
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Implement Progress and Stepper components (CR-46)
Overview
This PR implements two separate components for progress tracking: Progress (progress bar) and Stepper (step indicator). These components are part of the component implementation plan and will be used in future components like Modal for multi-step workflows.
The Progress component displays a 3-segment progress bar with support for partial fills, showing progress states from 1-0 through 3-2. The Stepper component displays a series of dots indicating the current active step in a multi-step process.
Both components follow the container/presentation pattern, use design tokens, and include comprehensive tests and Storybook stories.
Changes
Progress Component (
app/components/Progress/)Progress.container.tsx- Container logic with default state handlingProgress.view.tsx- Presentational component with 3-segment progress bar renderingProgress.types.ts- TypeScript interfaces for ProgressBarState (1-0 through 3-2)index.tsx- Default exportStepper Component (
app/components/Stepper/)Stepper.container.tsx- Container logic with default values (5 steps, active step 1)Stepper.view.tsx- Presentational component with dot indicatorsStepper.types.ts- TypeScript interfaces for StepperPropsindex.tsx- Default exportvar(--color-surface-inverse-secondary)Tests
tests/components/Progress.test.tsx- Unit tests with componentTestSuite, accessibility tests, and behavioral tests for all progress statestests/components/Stepper.test.tsx- Unit tests with componentTestSuite, accessibility tests, and behavioral tests for step renderingStorybook Stories
stories/Progress.stories.js- Stories for Default and AllStates (1-0 through 3-2)stories/Stepper.stories.js- Stories for Default and AllStates (active steps 1-5)Components Preview Page
app/components-preview/page.tsx- Added sections for Progress and Stepper components with all states displayedDesign Tokens Used
var(--spacing-scale-008),var(--spacing-scale-012)var(--color-content-default-brand-primary),var(--color-surface-default-secondary),var(--color-surface-inverse-secondary)var(--radius-full)Screenshots
How to Test
npm run storybook
Progress and Stepper Componentsto Progress and Stepper