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.