@bolttech/atoms-collapse NPM

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

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;