@bolttech/atoms-price

Price Component README

The Price component is a React component designed to display a formatted numerical value along with optional currency symbols and animated transitions for value updates. This component is a part of the project's UI module and is intended to enhance the visual representation of numerical values in various contexts.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

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

• Install the necessary dependencies:

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

• Copy the atoms-price.type.ts and atoms-price.style.ts files along with the Price component definition into your project.

• You can now use the Price component in your React application.

Usage

The Price component is used to display a numerical value along with animated transitions for value updates. It supports various customization options such as specifying the currency symbol, its position, size, and variant.

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

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

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Price
        value="1234.56"
        prevValue="1234.00"
        currency="$"
        currencyPosition="left"
        size="medium"
        variant="base"
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Price component accepts the following props:

Prop	Type	Description
id	string	The ID attribute for the component.
dataTestId	string	The data-testid attribute for testing purposes.
value	string	The current numerical value to be displayed.
prevValue	string	The previous numerical value to calculate and render transitions.
currency	string	The currency symbol to display alongside the value.
currencyPosition	string	The position of the currency symbol ('left' or 'right').
size	string	The size of the component ('small', 'medium', or 'large').
variant	string	The variant of the component ('base' or 'alternate').

Example

Here's an example of using the Price component:

<Price
  value="99.99"
  prevValue="89.99"
  currency="€"
  currencyPosition="right"
  size="large"
  variant="alternate"
/>

This will render a Price component with the value "99.99", a previous value of "89.99", a euro (€) currency symbol on the right, a large size, and using the alternate variant.

Contributing

Contributions to the Price 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.