Skip to content

Pending Review

Pending Review from User Experience (UX)

Step Progress Component

Overview

The PWC Step Progress is a multi-step workflow indicator component in the Progress Web Components design system. It displays sequential process completion with individual step statuses, visual progress tracking, and clear status indicators across React and Angular applications.

Core Capabilities

  • Multi-Step Visualization - Clear display of sequential workflow steps with individual status tracking
  • Status Indicators - Visual icons and labels for pending, processing, complete, and error states
  • Progress Bar Integration - Combined step tracking with overall progress bar for completion percentage
  • Dynamic State Updates - Real-time step status updates as workflows progress through different stages
  • Error State Handling - Clear error indication with appropriate visual feedback for failed steps
  • Internationalization Support - Built-in localization for status labels and progress messaging

When to use Step Progress:

  • Display multi-step processes like form wizards, onboarding flows, or setup procedures
  • Show workflow completion status for batch operations, data processing, or approval processes
  • Track sequential tasks where each step depends on the previous step's completion
  • Provide users with clear progress feedback during complex, time-consuming operations

When not to use Step Progress:

  • Simple single-step processes or basic progress indicators (use regular progress bars instead)
  • Non-sequential workflows where steps can be completed in any order
  • Navigation menus or tabs that aren't part of a linear process

Basic Implementation

import React, { useState } from 'react';
import { PwcStepProgress } from "@progress-i360/pwc-react";

function MyComponent() {
  const [steps, setSteps] = useState([
    { label: "User Information", status: "complete" },
    { label: "Account Setup", status: "processing" },
    { label: "Email Verification", status: "pending" },
    { label: "Profile Creation", status: "pending" }
  ]);

  const handleNextStep = () => {
    setSteps(current => {
      const next = current.map(step => ({ ...step }));
      const processingIndex = next.findIndex(step => step.status === 'processing');

      if (processingIndex === -1) {
        return next;
      }

      next[processingIndex].status = 'complete';
      if (processingIndex + 1 < next.length) {
        next[processingIndex + 1].status = 'processing';
      }

      return next;
    });
  };

  return (
      <div>
        <PwcStepProgress 
          label="Registration Process"
          steps={steps}
        />
        <button onClick={handleNextStep}>Next Step</button>
      </div>
  );
}

import { useState } from 'react';
import '@progress-i360/progress-web-components/step-progress';

function MyComponent() {
  const [workflowSteps] = useState([
    { label: "Data Upload", status: "complete" },
    { label: "Processing", status: "error" },
    { label: "Validation", status: "pending" },
    { label: "Publication", status: "pending" }
  ]);

  return (
      <pwc-step-progress 
        label="Data Processing Workflow"
        steps={workflowSteps}
      />
  );
}

// component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@progress-i360/progress-web-components/step-progress';
import '@progress-i360/progress-web-components/button';

@Component({
  selector: 'step-progress-demo',
  template: `
    <pwc-step-progress 
      [label]="processLabel"
      [steps]="currentSteps">
    </pwc-step-progress>
    <pwc-button 
      label="Next Step" 
      (pwc-click)="nextStep()"
      [disabled]="isComplete">
    </pwc-button>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class StepProgressDemo {
  processLabel = 'Setup Process';
  currentSteps = [
    { label: 'Configuration', status: 'complete' },
    { label: 'Validation', status: 'processing' },
    { label: 'Deployment', status: 'pending' }
  ];

  get isComplete() {
    return this.currentSteps.every(step => step.status === 'complete');
  }

  nextStep() {
    const processingIndex = this.currentSteps.findIndex(
      step => step.status === 'processing'
    );
    if (processingIndex !== -1 && processingIndex < this.currentSteps.length - 1) {
      this.currentSteps[processingIndex].status = 'complete';
      this.currentSteps[processingIndex + 1].status = 'processing';
    } else if (processingIndex === this.currentSteps.length - 1) {
      this.currentSteps[processingIndex].status = 'complete';
    }
  }
}

// Create step progress element
const stepProgress = document.createElement('pwc-step-progress');
stepProgress.label = 'Setup Process';
stepProgress.steps = [
  { label: 'Configuration', status: 'complete' },
  { label: 'Validation', status: 'processing' },
  { label: 'Deployment', status: 'pending' }
];

// Update step status function
function updateStepStatus(stepIndex, newStatus) {
  stepProgress.steps[stepIndex].status = newStatus;
}

// Example usage and step progression
updateStepStatus(1, 'complete');
document.body.appendChild(stepProgress);

Usage Patterns

Step progress components adapt to different workflow scenarios:

  • Linear Workflows - Sequential processes where each step must complete before the next begins
  • Parallel Processing - Multiple steps that can run simultaneously with independent status tracking
  • Error Recovery - Workflows that can encounter errors and require retry or alternative paths
  • Conditional Steps - Processes where certain steps may be skipped based on user choices or data conditions

Best Practices

Content Strategy Guidelines

  • Clear Step Labels - Use descriptive, action-oriented labels that clearly explain each step's purpose
  • Consistent Naming - Apply consistent terminology and formatting across all steps in the process
  • Meaningful Grouping - Group related sub-tasks under logical step categories for better organization
  • Progress Communication - Provide clear indication of current position and remaining steps

Performance Optimization

  • Efficient Updates - Update only changed step statuses rather than re-rendering entire component
  • Status Validation - Validate step status changes to prevent invalid workflow states
  • Memory Management - Clean up step progress tracking when workflows complete or are abandoned
  • Animation Control - Use processing animations judiciously to avoid performance impact

Integration Architecture

  • State Management - Coordinate step progress with application state and workflow logic
  • Error Handling - Implement proper error recovery and retry mechanisms for failed steps
  • Data Persistence - Save workflow progress to handle page refreshes and session interruptions
  • Accessibility Support - Provide screen reader updates for step status changes and progress updates

Common Use Cases

User Onboarding Flows

  • Display registration progress through account creation, verification, and profile setup steps
  • Show setup completion for new users configuring preferences and initial settings
  • Track progress through tutorial or guided tour sequences

Data Processing Workflows

  • Monitor batch processing operations with steps for validation, transformation, and storage
  • Display import/export progress with clear status indicators for each processing stage
  • Track multi-step data migration or synchronization processes

E-commerce Order Processing

  • Show order fulfillment progress from payment through shipping and delivery tracking
  • Display approval workflows for purchases requiring multiple authorization steps
  • Track return or refund processes with clear status updates

Troubleshooting

Common Issues

Steps Not Updating

Problem: Step statuses don't change when updating the steps property
Solution:

  • Ensure step objects are properly mutated and component re-rendering is triggered

Progress Bar Inconsistent

Problem: Overall progress bar doesn't match individual step completion status
Solution:

  • Verify step status calculations and ensure progress calculation logic is correct

Status Icons Missing

Problem: Step status icons don't display or show incorrectly
Solution:

  • Check that icon dependencies are loaded and status values match expected enum values

Layout Overflow Issues

Problem: Step progress component doesn't fit properly in container layouts
Solution:

  • Ensure proper container sizing and consider responsive design for mobile screens

Implementation Support

For detailed implementation guidance:

  • API Documentation - Complete step configuration options and status management in Storybook
  • Interactive Examples - Live demos showing different workflow scenarios and state transitions
  • Integration Patterns - Best practices for connecting step progress with workflow engines and state management

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools:

🔗 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.