Collapse Component

An expandable/collapsible section component with a clickable title and status-aware icon.

Installation

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

npm install @bolttech/ob-atoms-collapse

or

yarn add @bolttech/ob-atoms-collapse

Props

The Collapse component accepts the following properties:

| Prop | Type | Description | | ---------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | | titleText | string | Required. Text displayed as the collapse header. | | isOpen | boolean | Required. Controls whether the content is expanded or collapsed. | | onClick | (value: boolean) => void | Required. Callback fired to toggle the isOpen state. | | status | 'default' \| 'error' \| 'success' | Required. Status of the collapse, affects the icon shown. | | variant | 'large' \| 'small' | Size variant of the collapse. Defaults to 'small'. | | children | React.ReactNode \| React.ReactNode[] | Content rendered inside the collapse when open. | | imgCollapse| string \| React.ReactElement<HTMLImageElement> | Custom image to use as the collapse icon. | | icons | { opened, closed, error?, success? } | Custom icons referenced per status. | | dataTestId | string | The data-testid attribute for testing. |

Usage

import React, { useState } from 'react';
import { Collapse } from '@bolttech/ob-atoms-collapse';

const ExampleComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Collapse
      titleText="Coverage details"
      isOpen={isOpen}
      status="default"
      onClick={setIsOpen}
    >
      <p>Detailed information about the selected coverage.</p>
    </Collapse>
  );
};

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.