@bolttech/atoms-description-wrapper

DescriptionWrapper Component

A React component for displaying descriptions with optional icons and styling options.

Installation

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

npm install @edirect/frontend-foundations @bolttech/atoms-description-wrapper

or

yarn add @edirect/frontend-foundations @bolttech/atoms-description-wrapper

Props

The DescriptionWrapper component accepts the following properties:

Prop	Type	Description
coverageLabel	string	The label for the coverage description.
coverageValue	string	The value to be displayed in the description.
sizeVariant	string	The size variant of the component (e.g., 'small', 'medium', 'large').
icon	string	The name of the icon to be displayed next to the description.
breakLine	boolean	If true, the description will break to a new line if necessary.
included	boolean	If true, the component is considered included.
dataTestId	string	The data-testid attribute for testing.

Usage

import React from 'react';
import {DescriptionWrapper} from '@bolttech/atoms-description-wrapper';
import {bolttechTheme, BolttechThemeProvider} from "@edirect/frontend-foundations";

const ExampleComponent = () => {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <DescriptionWrapper
        coverageLabel="Coverage"
        coverageValue="Included"
        sizeVariant="small"
        icon="check_circle"
        breakLine={false}
        included={true}
        dataTestId="custom-description"
      />
    </BolttechThemeProvider>
  );
};

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.