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 @bolttech/frontend-foundations @bolttech/atoms-description-wrapper

or

yarn add @bolttech/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 | undefined | normal | break-all | If normal | break-all, 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 '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <DescriptionWrapper coverageLabel="Coverage" coverageValue="Included" sizeVariant="small" icon="check_circle" breakLine="break-all" 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.