Installation

To use the ProgressBar component in your React application, you need to follow these steps:

Using npm

npm install @bolttech/frontend-foundations @bolttech/atoms-progress-bar

Using Yarn

yarn add @bolttech/frontend-foundations @bolttech/atoms-progress-bar

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

Usage

The ProgressBar component is used to display a visual progress bar along with a label and a percentage indicator. It can be customized by providing the label and percentage props.

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

import React from 'react';
import { ProgressBar } from '@bolttech/atoms-progress-bar';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <ProgressBar label="Upload Progress" percentage={75} variant="default" size="small" showPercentage={true} textPosition="top" />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The ProgressBar component accepts the following props:

| Prop | Type | Description | | ---------------- | ------- | -------------------------------------------------------------------------- | | dataTestId | string | The data-testid attribute for testing purposes. | | label | string | The label to be displayed above the progress bar. | | percentage | number | The percentage value representing the progress to display. | | size | string | Prop that defines the height of the progress bar. | | variant | string | Variant of the progress bar, mainly used to replicate a password checker. | | textPosition | string | Defines if the label should be displayed on top or above the progress bar. | | showPercentage | boolean | Defines if the total percentage should be displayed. |

Example

Here's an example of using the ProgressBar component:

<ProgressBar label="Loading" percentage={50} variant="default" size="small" showPercentage={true} textPosition="top" />

This will render a ProgressBar component with the label "Loading" and a progress bar filled to 50%.

Contributing

Contributions to the ProgressBar 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 GitHub repository.