@bolttech/atoms-description-wrapper NPM

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

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;