@bolttech/atoms-accordion

Accordion Component

A simple accordion component for displaying collapsible content.

Installation

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

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

or

yarn add @edirect/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.
changeShowContent	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 "@edirect/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"
        changeShowContent={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.