@bolttech/molecules-collapse-group

Collapse Group Component

The Collapse Group component is a React component that provides a way to group and manage a collection of collapsible elements. It helps to create sections of content that can be expanded or collapsed.

Installation

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

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

or

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

Usage

You can utilize the Collapse Group component by importing it and wrapping the collapsible elements within it. Here's an example:

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

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <CollapseGroup dataTestId="my-collapse-group">
        <Collapse title="Section 1">
          Content of section 1
        </Collapse>
        <Collapse title="Section 2">
          Content of section 2
        </Collapse>
        {/* Add more Collapse components here */}
      </CollapseGroup>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Collapse Group component accepts the following props:

Prop	Type	Description
children	ReactNode	Child components to be wrapped by the Collapse Group.
dataTestId	string	The data-testid attribute for testing purposes.

Functionality

The Collapse Group component provides the following functionality:

• Grouping: It groups and manages a collection of collapsible elements (e.g., Collapse components).
• Accessibility: It ensures a proper accessibility structure for collapsible sections.

Contribution

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