Accordion Group Component

The AccordionGroup component is a React component designed to display a group of accordions. It allows you to manage multiple accordion items, controlling their open and close states. This component is built on top of the AtomsAccordion component from the @bolttech/atoms-accordion package.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the AccordionGroup component in your React application, follow these steps:

npm install @bolttech/frontend-foundations @bolttech/molecules-accordion-group

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-accordion-group

Once you have the required dependencies installed, you can start using the AccordionGroup component in your React application.

Usage

The AccordionGroup component provides an easy way to create a group of accordions. It allows you to manage their open and close states, and supports single or multiple open accordions based on the multi prop.

To use the component, import it and include it in your JSX:

import React from 'react';
import {AccordionGroup} from '@bolttech/molecules-accordion-group';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // You can import your AccordionGroup component here

function App() {
  const accordionData = [
    {
      id: 'accordion1',
      headerText: 'Accordion 1',
      contentText: 'Content of Accordion 1',
      disabled: false,
      showContent: false,
    },
    {
      id: 'accordion2',
      headerText: 'Accordion 2',
      contentText: 'Content of Accordion 2',
      disabled: false,
      showContent: false,
    },
    // Add more accordion items as needed
  ];

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <AccordionGroup data={accordionData} multi={true}/>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The AccordionGroup component accepts the following props:

| Prop | Type | Description | |-------------|------------|----------------------------------------------------------------------| | data | AccordionData[] | An array of objects representing the accordion items. | | multi | boolean | Whether multiple accordions can be open at the same time. |

Each AccordionData object has the following properties:

| Property | Type | Description | |----------------|---------|-----------------------------------------------------------| | id | string | A unique identifier for the accordion item. | | headerText | string | The text displayed as the accordion header. | | contentText | string | The content displayed when the accordion is open. | | disabled | boolean | Whether the accordion is disabled. | | showContent | boolean | Whether the accordion content is initially shown. |

Example

Here's an example of using the AccordionGroup component:

const accordionData = [
  {
    id: 'accordion1',
    headerText: 'Accordion 1',
    contentText: 'Content of Accordion 1',
    disabled: false,
    showContent: false,
  },
  {
    id: 'accordion2',
    headerText: 'Accordion 2',
    contentText: 'Content of Accordion 2',
    disabled: false,
    showContent: false,
  },
];

<AccordionGroup data={accordionData} multi={true} />;

This will render a group of accordions with the specified header texts and content.

Contributing

Contributions to the AccordionGroup component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.