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:

1. Install the necessary dependencies:

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

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

3. 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.