@bolttech/molecules-side-panel

Side Panel Component

The SidePanel component is a React component that provides a customizable side panel overlay for displaying additional content.

Installation

To use the SidePanel component, you need to install the required dependency:

npm install @bolttech/frontend-foundations @bolttech/molecules-side-panel

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-side-panel

Usage

You can use the SidePanel component by importing it and including it in your JSX. Here's an example:

import React, {useState} from 'react';
import {SidePanel} from '@bolttech/molecules-side-panel';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // Adjust the path to your component

function App() {
  const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);

  const openSidePanel = () => {
    setIsSidePanelOpen(true);
  };

  const closeSidePanel = () => {
    setIsSidePanelOpen(false);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <button onClick={openSidePanel}>Open Side Panel</button>

      {/* Side Panel component */}
      <SidePanel
        isOpen={isSidePanelOpen}
        closeOnBackdropClick={true}
        onClose={closeSidePanel}
        dataTestId="side-panel"
        align="right"
      >
        {/* Content to display inside the side panel */}
        <h2>Side Panel Content</h2>
        <p>This is the content of the side panel.</p>
        <button onClick={closeSidePanel}>Close</button>
      </SidePanel>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The SidePanel component accepts the following props:

Prop	Type	Description
isOpen	boolean	Determines whether the side panel is open.
closeOnBackdropClick	boolean	Whether the side panel should close on backdrop click.
align	string	Alignment of the side panel ("left" or "right").
onClose	function	Callback function to close the side panel.
dataTestId	string	The data-testid attribute for testing purposes.
children	ReactNode	Content to be displayed inside the side panel.

Functionality

The SidePanel component provides the following functionality:

• Display: Renders a side panel with customizable content.
• Opening and Closing: Opens and closes the side panel based on user interaction.
• Backdrop Click: Closes the side panel when the backdrop is clicked (if enabled).

Contribution

Contributions to the SidePanel component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.