Progress and Stepper #33

2026-02-02T18:46:08Z

an.di commented

2026-02-02 18:46:08 +00:00

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

Screenshot 2026-02-02 at 11.45.24 AM.png

Screenshot 2026-02-02 at 11.45.58 AM.png

How to Test

**Run Storybook:**ash
npm run storybook

# 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

Screenshot 2026-02-02 at 11.45.24 AM.png

32 KiB

Screenshot 2026-02-02 at 11.45.58 AM.png

88 KiB

an.di self-assigned this 2026-02-02 18:46:08 +00:00

an.di added 3 commits 2026-02-02 18:46:09 +00:00

Implement stepper and progress bar 462488ddce

Fixes on progress component to pass tests 9d4a5f4238

Adjust progress stories 6223ac5475

an.di changed title from ~~Progress and Stepper Components~~ to Progress and Stepper

2026-02-02 18:47:14 +00:00

an.di merged commit b98b9dded3 into main