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.

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

or

`bash 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-testidattribute for testing. | | variant |string| Size variant a prop that should be the value 'small' or 'large' | | icons |Icons | Icons referenced with status |

`Usage`

`jsx 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 ( 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 /} ); };

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.

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

jsx
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 (
    
              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 /}
      
    
  );
};

export default ExampleComponent;