Accordion Component

A simple accordion component for displaying collapsible content.

Installation

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

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

or

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

Props

The Accordion component accepts the following properties:

| Prop | Type | Description | | ----------- | ---------- | -------------------------------------------------------------------------------------------------------- | | headerText | string | The text to be displayed as the accordion header. | | showContent | boolean | Controls whether the content is shown or hidden. | | contentText | string | The text to be displayed as the accordion content. | | disabled | boolean | Disables the accordion interaction when set to true. | | icon | string | The name of the icon to be displayed next to the header text. | | onClick | function | Callback function to toggle the showContent state. | | id | string | An optional identifier to differentiate between multiple instances of the accordion (for testing, etc.). |

Usage

import React, { useState } from 'react';
import { Accordion } from '@bolttech/atoms-accordion';
import { bolttechTheme } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const [showContent, setShowContent] = useState(false);

  const handleToggleContent = (value) => {
    setShowContent(value);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Accordion headerText="Accordion Header" showContent={showContent} contentText="Accordion Content" icon="expand_more" onClick={handleToggleContent} id="unique-accordion-id" />
    </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.