Stepper Component

The Stepper component is a React component designed to provide a customizable step-by-step navigation experience. This component allows users to visualize and navigate through a sequence of steps, each represented by a title and optional content.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the Stepper component in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-stepper

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-stepper

Once you have the required dependencies installed, you can start using the Stepper component in your React application.

Usage

The Stepper component provides a visual representation of a step-by-step process. It supports customization through various props.

To use the component, import it and include it in your JSX:

import React from 'react';
import {Stepper} from '@bolttech/atoms-stepper';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  const stepperArray = [
    {
      title: 'Step 1',
      statusIndicator: 'completed',
      componentContent: <p>Step 1 content</p>,
    },
    {
      title: 'Step 2',
      statusIndicator: 'default',
      componentContent: <p>Step 2 content</p>,
    },
    {
      title: 'Step 3',
      statusIndicator: 'error',
      componentContent: <p>Step 3 content</p>,
    },
  ];

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Stepper stepperArray={stepperArray} dataTestId="my-stepper"/>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Stepper component accepts the following props:

| Prop | Type | Description | |--------------|---------------|---------------------------------------------------| | stepperArray | StepperItem[] | An array of step objects to be displayed. | | dataTestId | string | The data-testid attribute for testing purposes. |

Each StepperItem object should have the following structure:

{
  title: 'Step Title',
  statusIndicator: 'completed' | 'default' | 'error',
  componentContent: JSX.Element,
}

Example

Here's an example of using the Stepper component:

<Stepper
  stepperArray={[
    {
      title: 'Step 1',
      statusIndicator: 'completed',
      componentContent: <p>Step 1 content</p>,
    },
    {
      title: 'Step 2',
      statusIndicator: 'default',
      componentContent: <p>Step 2 content</p>,
    },
    {
      title: 'Step 3',
      statusIndicator: 'error',
      componentContent: <p>Step 3 content</p>,
    },
  ]}
  dataTestId="my-stepper"
/>

This will render a Stepper component with three steps, each with a different status indicator and content.

Contributing

Contributions to the Stepper component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.