@bolttech/molecules-modal

Modal Component

The Modal component is a customizable React component that displays a modal dialog box with a title, content, and action buttons.

Installation

To use the Modal component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-modal

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-modal

Usage

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

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

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        title="Confirmation"
        cancel={{
          title: 'Cancel',
          variant: 'ghost',
          onClick: () => setIsModalOpen(false),
        }}
        cancel={{
          title: 'Confirm',
          variant: 'transaction',
          onClick: () => setIsModalOpen(true),
        }}
        footerDirection="default"
        fullHeight={true}
        closeOnBackdropClick={true}
      >
        <p>Are you sure you want to proceed?</p>
      </Modal>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Modal component accepts the following props:

Prop	Type	Description
children	ReactNode	Content to be displayed within the modal.
dataTestId	string	The data-testid attribute for testing purposes.
isOpen	boolean	Whether the modal is open or closed.
title	string	Title of the modal dialog box.
confirm	FooterButtonsType	Object containing the title, variant and onclick of the confirm button
cancel	FooterButtonsType	Object containing the title, variant and onclick of the cancel button.
footerDirection	default or reverse	Direction of the buttons on the footer.
fullHeight	boolean	Boolean representing if the modal should take the full height of the page when on mobile.
closeOnBackdropClick	boolean	Boolean representing if the modal should close when clicking outside of it.

Functionality

The Modal component provides the following functionality:

• Modal Display: Renders a modal dialog box with the specified title, content, and buttons.
• Opening and Closing: Allows opening and closing the modal by setting the isOpen prop.
• Action Buttons: Provides action buttons for canceling and confirming.

Contributions

Contributions to the Modal 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.