@bolttech/atoms-progress-bar

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.