Skip to content

Components Overview

Introduction

The Progress Infra 360 Design System provides a comprehensive library of reusable UI components built with modern web standards. Each component is designed for consistency, accessibility, and developer productivity across React, Angular, and vanilla JavaScript applications.

Component Categories

  • Data Components

    Components for displaying and managing data-driven interfaces

    Action Bar · Data Context · Data View · Progress Bar · Step Progress · Table · Placeholder

    Perfect for dashboards, analytics, and data-heavy interfaces with built-in state management

  • Form Components

    Interactive form controls and input elements with comprehensive validation

    Button · Input · Select · Checkbox · Radio · Switch · Form · Toast · Wizard

    Complete form building toolkit with validation, accessibility, and user feedback

  • Layout Components

    Structural components for organizing content and building responsive layouts

    Flex · Divider · Dialog · Expander · Mode Viewer · Chat · Chat Window · Tabs

    Foundation elements for responsive layouts and content organization

  • Navigation Components

    Components for user navigation and wayfinding with accessibility support

    Menu · Side Nav · List Item · Confirm Dialog

    Create intuitive navigation experiences with keyboard and screen reader support

  • Solutions Components

    Enterprise-ready composite components for complex business use cases

    Login · SSO Config · Connector · Notifications

    Complete business solutions combining multiple components for enterprise workflows

  • Typography Components

    Text display and formatting components with consistent styling

    Body · Heading · Link · Avatar · Icon · Tag · Skeleton · Hint

    Comprehensive typography system for readable and accessible text content

Getting Started

Quick Start Guide

  1. Install the Design System 

    npm install @progress-i360/design-system

  2. Import Components 

    // Import individual components
import '@progress-i360/design-system/button';
import '@progress-i360/design-system/input';

// Or import all components
import '@progress-i360/design-system';

  3. Use in Your Application 

    <pwc-button variant="primary" label="Get Started"></pwc-button>
<pwc-input label="Your Name" placeholder="Enter your name"></pwc-input>

Framework Integration

import { PwcActionBar, PwcButton } from "@progress-i360/pwc-react";

export function ActionBarExample() {
  return (
    <PwcActionBar heading="Users" rowCount={12}>
      <PwcButton slot="actions" variant="primary" label="Add User" />
    </PwcActionBar>
  );
}

import "@progress-i360/progress-web-components/action-bar";
import "@progress-i360/progress-web-components/button";

export function ActionBarExample() {
  return (
    <pwc-action-bar heading="Users" rowCount={12}>
      <pwc-button slot="actions" variant="primary" label="Add User"></pwc-button>
    </pwc-action-bar>
  );
}

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

@Component({
  selector: "action-bar-demo",
  template: `
    <pwc-action-bar heading="Users" [rowCount]="12">
      <pwc-button slot="actions" label="Add User" variant="primary"></pwc-button>
    </pwc-action-bar>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ActionBarDemo {}

import "@progress-i360/progress-web-components/action-bar";
import "@progress-i360/progress-web-components/button";

const bar = document.createElement("pwc-action-bar");
bar.heading = "Users";
bar.rowCount = 12;

const button = document.createElement("pwc-button");
button.slot = "actions";
button.variant = "primary";
button.label = "Add User";

bar.appendChild(button);
document.body.appendChild(bar);

Developer Resources

Key Features

🎯 Developer-Friendly

  • TypeScript support with full type definitions
  • Comprehensive Storybook documentation
  • Copy-paste ready code examples
  • Framework-agnostic web components

♿ Accessibility First

  • WCAG 2.1 AA compliance
  • Screen reader support
  • Keyboard navigation
  • High contrast mode support

🎨 Design System Integration

  • Consistent design tokens
  • Themeable components
  • Light and dark mode support
  • Responsive design patterns

🔧 Production Ready

  • Tree-shakeable imports
  • Optimized bundle sizes
  • Cross-browser compatibility
  • Comprehensive testing

Common Patterns

Form Building

<pwc-form heading="User Registration">
  <pwc-input label="Email" type="email" required></pwc-input>
  <pwc-password label="Password" required></pwc-password>
  <pwc-button variant="primary" type="submit">Register</pwc-button>
</pwc-form>

Data Display

<pwc-action-bar heading="Users" row-count="150">
  <pwc-button slot="actions" variant="primary" label="Add User"></pwc-button>
</pwc-action-bar>
<pwc-table data-source="/api/users"></pwc-table>

Layout Structure

<pwc-flex direction="column" gap="m">
  <pwc-heading content="Dashboard"></pwc-heading>
  <pwc-divider></pwc-divider>
  <pwc-mode-viewer mode="overview" views="..."></pwc-mode-viewer>
</pwc-flex>

Support & Community

Get Help

  • Documentation - Comprehensive guides for each component
  • Storybook - Interactive examples and API reference
  • GitHub Issues - Report bugs and request features
  • Team Support - Contact the Design System team

Contributing

Ready to build amazing user interfaces? Start with any component category above or explore our Storybook for interactive examples.