StepperHorizontal Component

A horizontal step indicator with a progress bar, typically used at the top of multi-step flows.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/ob-atoms-stepper-horizontal

or

yarn add @bolttech/ob-atoms-stepper-horizontal

Props

The StepperHorizontal component accepts the following properties:

| Prop | Type | Description | | ----------- | -------------------------- | ---------------------------------------------------------------------- | | description | string | Required. Text shown above the progress bar, e.g. 'Step 2 of 5 / Vehicle details'. | | current | number | Required. Current step number. | | limit | number | Required. Total number of steps. The bar fill is (current / limit) * 100%. | | status | 'default' \| 'selected' | Required. Visual status of the step indicator. | | dataTestId | string | The data-testid attribute for testing. |

Usage

import React from 'react';
import { StepperHorizontal } from '@bolttech/ob-atoms-stepper-horizontal';

const ExampleComponent = () => {
  return (
    <StepperHorizontal
      description="Step 6 of 9 / Insurance history"
      current={6}
      limit={9}
      status="selected"
    />
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.