@bolttech/atoms-collapse

Certainly! Here's the README.md for the provided Collapse component:

Collapse Component

A React component to create collapsible sections with headers and content.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/atoms-collapse

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-collapse

Props

The Collapse component accepts the following properties:

Prop	Type	Description
titleText	string	The text content of the collapse header.
isOpen	boolean	Determines whether the collapse is open or closed.
imgCollapse	string or element	An image URL or an element to be displayed as the collapse header icon.
status	string	The status of the collapse (e.g., 'default', 'error', 'success').
onClick	function	Callback function to handle the collapse header click event.
children	node	The content to be displayed within the collapsed section.
dataTestId	string	The data-testid attribute for testing.
variant	string	Size variant a prop that should be the value 'small' or 'large'
icons	Icons	Icons referenced with status

Usage

import React, {useState} from 'react';
import {Collapse} from '@bolttech/atoms-collapse';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const [isCollapseOpen, setIsCollapseOpen] = useState(false);

  const handleCollapseClick = (isOpen) => {
    setIsCollapseOpen(isOpen);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Collapse
        titleText="Section Title"
        isOpen={isCollapseOpen}
        imgCollapse="https://example.com/collapse-icon.png"
        status="default"
        onClick={handleCollapseClick}
        dataTestId="custom-collapse"
      >
        {/* Content to display within the collapsed section */}
      </Collapse>
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.