Summary Card Component

The SummaryCard component is a React component that displays a summary card with product details, coverages, and a main action button.

Installation

To use the SummaryCard component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-summary-card

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-summary-card

Usage

You can use the SummaryCard component by importing it and including it in your JSX. Here's an example:

import React from 'react';
import {SummaryCard} from '@bolttech/molecules-summary-card';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // Adjust the path to your component

const summaryCardDetails = [
  {
    detailsLabel: 'Plan Details 1',
    detailsActionLabel: 'Action',
    detailsActionClick: () => console.log('Action clicked for Plan Details 1'),
    coverages: [
      {name: 'Coverage 1', value: '$100'},
      // Add more coverages as needed
    ],
  },
  {
    detailsLabel: 'Plan Details 2',
    coverages: [
      {name: 'Coverage 1', value: '$200'},
      // Add more coverages as needed
    ],
  },
];

const summaryCardContent = {
  title: 'Summary',
  productImg: 'path_to_image.png',
  details: summaryCardDetails,
  totalValueLabel: 'Total Value:',
  totalValue: '$300',
  mainButtonLabel: 'Main Button',
  mainButtonClick: () => console.log('Main button clicked'),
  period: 'Monthly',
  legalText: 'Legal information',
  stickyDistance: '10px', // Optional
};

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      {/* SummaryCard component */}
      <SummaryCard {...summaryCardContent} dataTestId="example"/>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The SummaryCard 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 | | | details | array | An array of detail items to be displayed. | | totalValueLabel | string | The label for the total value section. | | totalValue | string | The total value to be displayed. | | mainButtonLabel | string | The label for the main action button. | | mainButtonClick | function | The function to be called when the main button is clicked. | | period | string | The period label to be displayed. | | legalText | string | The legal text to be displayed. | | stickyDistance | string | The stickyDistance adds the CSS property 'position: sticky' to an element and sets the top distance based on the provided value. |

Each details item should have the following structure:

{
  detailsLabel: 'Details Label',
  detailsActionLabel: 'Action Label', // Optional
  detailsActionClick: () => {},       // Optional
  coverages: [
    { name: 'Coverage 1', value: '$100' },
    // Add more coverages as needed
  ],
}

Functionality

The SummaryCard component provides the following functionality:

• Display: Renders a summary card with product image, details, coverages, total value, main action button, period, and legal text.
• Customizable Content: Allows you to customize the title, product image, detail items, coverages, total value, main action button label, period, and legal text.

Contribution

Contributions to the SummaryCard 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.