Card Component

The Card component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component

Installation

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

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

or

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

Usage

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

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

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Card disabled={true}>
        <div>Are you sure you want to proceed?</div>
      </Card>
      <Card selected={true}>
        <div>Are you sure you want to proceed?</div>
      </Card>
      <Card>
        <div>Are you sure you want to proceed?</div>
      </Card>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Card 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. | | disabled | boolean | Boolean that represent if card is disabled. | | selected | boolean | Boolean that represent if Card is selected. | | variant | string | Variant a prop string that have two option (primary, secondary) that will impact on Card style. | | className | string | String that allow to put custom classes on component. |

Contributions

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