## Component Name
StepGroup
## Description
StepGroup visualizes sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference. The component supports both vertical and horizontal orientations, customizable progress states, and nested structures for complex workflows.
## TypeScript Types
Below are the TypeScript types that define the props that StepGroup and its subcomponents accept:
````typescript
// Main component props
type StepGroupProps = {
/**
* size of step group
*
* @default medium
*/
size?: 'medium' | 'large';
/**
* orientation of step group
*
* @default vertical
*/
orientation?: 'horizontal' | 'vertical';
/**
* children slot for StepItem components
*/
children: React.ReactElement | React.ReactElement[];
/**
* Width of StepGroup. By default it takes the width of its items.
*/
width?: BoxProps['width'];
/**
* minWidth prop of StepGroup
*/
minWidth?: BoxProps['minWidth'];
/**
* maxWidth prop of StepGroup
*
* @default 100%
*/
maxWidth?: BoxProps['maxWidth'];
} & StyledPropsBlade &
DataAnalyticsAttribute &
TestID;
// StepItem component props
type StepItemProps = {
/**
* title of StepItem
*/
title: string;
/**
* color of StepItem title
*/
titleColor?: `feedback.text.${FeedbackColors}.intense` | `surface.text.primary.normal`;
/**
* A string that renders in italic font. Made for adding timestamp values.
*
* ```jsx
* timestamp="Thu, 11th Oct23 | 12:00pm"
* ```
*/
timestamp?: string;
/**
* Description of StepItem
*/
description?: string;
/**
* Progress line of step. When its start only starting part is highlighted and rest is kept dotted
*
* @default full
*/
stepProgress?: 'start' | 'end' | 'full' | 'none';
/**
* marker JSX slot. It can be StepItemIndicator or StepItemIcon
*
* ```jsx
* marker={}
* marker={}
* ```
*/
marker?: React.ReactElement;
/**
* trailing slot for StepItem. Mostly meant for Badge
*/
trailing?: React.ReactElement;
/**
* Controlled state of selected item
*/
isSelected?: boolean;
/**
* State for disabling the step item
*/
isDisabled?: boolean;
/**
* Anchor tag's href value. Turns StepItem into interactive item and render it as `` tag
*/
href?: LinkProps['href'];
/**
* Anchjor tag's taget value. Meant to be used alongside `href` prop
*/
target?: LinkProps['target'];
/**
* StepItem's click handler. Turns StepItem into interactive item and render it as button tag
*/
onClick?: (event: React.MouseEvent) => void;
/**
* Children slot for adding additional custom elements to item
*/
children?: React.ReactNode;
} & DataAnalyticsAttribute;
````
## Example
### Basic Vertical StepGroup
This example demonstrates a standard vertical StepGroup showing a progression of steps with different states, timestamps, icons, and badges to represent a complete onboarding process.
```jsx
import {
StepGroup,
StepItem,
StepItemIcon,
StepItemIndicator,
Badge,
FileIcon,
UserIcon,
BriefcaseIcon,
ClockIcon,
HeartIcon,
Box,
} from '@razorpay/blade/components';
function MyStepGroup() {
return (
}
/>
}
/>
Received by our team
}
stepProgress="full"
marker={}
/>
}
/>
}
trailing={
Pending
}
/>
);
}
```
### Interactive StepGroup with Click Handlers
This example shows how to create an interactive StepGroup where steps can be selected via click events, with visual feedback and state management to track the current selected step.
```jsx
import { StepGroup, StepItem, StepItemIndicator, Button, Box } from '@razorpay/blade/components';
import { useState } from 'react';
function InteractiveStepGroup() {
const [selectedIndex, setSelectedIndex] = useState(-1);
const stepItems = [
{
title: 'Introduction',
timestamp: 'Mon, 15th Oct’23 | 12:00pm',
description: 'Introduction to Razorpay Payment Gateway',
},
{
title: 'Personal Details',
timestamp: 'Mon, 16th Oct’23 | 12:00pm',
description: 'Fill your Personal Details for onboarding',
},
{
title: 'Business Details',
timestamp: 'Mon, 17th Oct’23 | 12:00pm',
description: 'Fill your Business Details for onboarding',
isDisabled: true,
},
{
title: 'Complete Onboarding',
timestamp: 'Mon, 20th Oct’23 | 12:00pm',
description: 'Complete your onboarding to start',
},
];
return (
{stepItems.map((stepInfo, index) => (
}
onClick={() => setSelectedIndex(index)}
stepProgress={
index === selectedIndex ? 'start' : index < selectedIndex ? 'full' : 'none'
}
{...stepInfo}
/>
))}
{selectedIndex >= 0 && (
)}
);
}
```
### Nested StepGroup with Collapsible Sections
This example demonstrates a complex implementation with nested StepGroups and collapsible sections that can be expanded to reveal additional step details, useful for displaying hierarchical processes.
```jsx
import {
StepGroup,
StepItem,
StepItemIcon,
StepItemIndicator,
Badge,
Box,
Button,
Collapsible,
CollapsibleBody,
CollapsibleLink,
RazorpayIcon,
BriefcaseIcon,
ClockIcon,
} from '@razorpay/blade/components';
import { useState } from 'react';
function NestedStepGroup() {
const [isExpanded, setIsExpanded] = useState(false);
return (
}
/>
Received by our team
}
stepProgress="full"
marker={}
/>
}
/>
}
/>
setIsExpanded(newIsExpanded)}
direction="top"
>
{isExpanded ? 'Hide Details' : 'Show Details'}
}
stepProgress="full"
/>
}
stepProgress="start"
>
Pending
}
/>
Pending
}
/>
);
}
```
### Horizontal StepGroup
This example shows a horizontal orientation of the StepGroup component, ideal for representing a linear progression of steps across the page rather than vertically down the page.
```jsx
import { StepGroup, StepItem, StepItemIndicator, Box } from '@razorpay/blade/components';
function HorizontalStepGroup() {
return (
}
/>
}
/>
}
isSelected={true}
/>
} />
} />
);
}
```