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.