@bolttech/molecules-success-card v0.19.1
Success Card Component
The SuccessCard component is a React component that displays a success card with information about a product, its details, and insured information.
Installation
To use the SuccessCard component, you need to install the required dependencies:
npm install @bolttech/frontend-foundations @bolttech/molecules-success-card
or
yarn add @bolttech/frontend-foundations @bolttech/molecules-success-card
Usage
You can use the SuccessCard component by importing it and including it in your JSX. Here's an example:
import React from 'react';
import { SuccessCard } from '@bolttech/molecules-success-card';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // Adjust the path to your component
const successCardContent = {
title: 'Success!',
productImg: 'path_to_image.png',
productName: 'Product Name',
productDescription: 'Product Description',
contentValue: [
{
label: 'Coverage Label 1',
value: '$1000',
icon: 'check',
included: true,
breakLine: 'normal',
},
// Add more content items as needed
],
dividerLabel: 'Insured Information',
insuredInfo: [
{
icon: 'check',
label: 'Insured Info 1',
},
// Add more insured info items as needed
],
};
function App() {
return (
<BolttechThemeProvider theme={bolttechTheme}>
{/* SuccessCard component */}
<SuccessCard {...successCardContent} dataTestId="example" />
</BolttechThemeProvider>
);
}
export default App;
Props
The SuccessCard component accepts the following props:
Prop | Type | Description |
---|---|---|
dataTestId | string | The data-testid attribute for testing purposes. |
title | string | The title to be displayed at the top of the card. |
productImg | string or | The image URL or JSX element for the product image. |
ReactNode | ||
productName | string | The name of the product. |
productDescription | string | The description of the product. |
contentValue | array | An array of content items to be displayed. |
dividerLabel | string | The label for the divider between content and insured information. |
insuredInfo | array | An array of insured information items. |
Each contentValue
and insuredInfo
item should have the following structure:
{
label: 'Label',
value: 'Value',
icon: 'icon_name', // Name of the icon from the @bolttech/atoms-icon library
included: true, // Whether it's included or not (boolean)
breakLine: 'normal', // Whether to display a line break after this item ('normal' or 'break-all' or undefined)
}
Functionality
The SuccessCard component provides the following functionality:
- Display: Renders a success card with product information, content items, and insured information.
- Customizable Content: Allows you to customize the title, product image, product name, product description, content items, and insured information.
- Icon Display: Displays icons from the @bolttech/atoms-icon library.
- Divider: Separates content and insured information with a customizable divider label.
Contribution
Contributions to the SuccessCard component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.
2 months ago
4 months ago
6 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago