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.
npm install @bolttech/molecules-collapse-groupThe 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.
To use the Collapse Group component, you need to install the required dependencies:
``bash`
npm install @bolttech/frontend-foundations @bolttech/molecules-collapse-group
or
`bash`
yarn add @bolttech/frontend-foundations @bolttech/molecules-collapse-group
You can utilize the Collapse Group component by importing it and wrapping the collapsible elements within it. Here's an example:
`jsx
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 (
Content of section 1
Content of section 2
{/ Add more Collapse components here /}
);
}
export default App;
`
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. |
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.
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.