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

Single Card

You can utilize the Card component individually as a toggle or button:

import React, { useState } from 'react';
import { Card } from '@bolttech/molecules-card';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  const [selected, setSelected] = useState(false);

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Card selected={selected} onClick={() => setSelected(!selected)}>
        <div>Click me to toggle selection</div>
      </Card>
    </BolttechThemeProvider>
  );
}

Card Group

Use CardGroup to coordinate a single selection among multiple cards. It uses the id of each card to track selection:

import React, { useState } from 'react';
import { Card, CardGroup } from '@bolttech/molecules-card';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  const [selectedValue, setSelectedValue] = useState('card-1');

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <CardGroup name="my-group" value={selectedValue} onChange={(val) => setSelectedValue(val)}>
        <Card id="card-1">Option 1</Card>
        <Card id="card-2">Option 2</Card>
        <Card id="card-3">Option 3</Card>
      </CardGroup>
    </BolttechThemeProvider>
  );
}

Props

Card

| Prop | Type | Description | | ------------ | ----------- | ----------------------------------------------- | | children | ReactNode | Content to be displayed within the card. | | dataTestId | string | The data-testid attribute for testing purposes. | | disabled | boolean | If true, the card is disabled. | | selected | boolean | If true, the card is selected (active). | | id | string | Unique identifier (required for CardGroup). | | variant | string | Style variant: primary or secondary. | | onClick | function | Click event handler. | | className | string | Custom class name. |

CardGroup

| Prop | Type | Description | | --------------- | ---------- | -------------------------------------------------------------- | ---------------------------------------------- | | children | node[] | List of Card components. | | name | string | Name of the group (for form submission). | | value | string | string[] | The id(s) of the currently selected card(s). | | selectionType | string | Type of selection: single (default) or multiple. | | disabled | boolean | If true, all cards in the group are disabled. | | errorMessage | string | Error message to display. | | onChange | function | Callback when selection changes. Returns the id of the card. | | dataTestId | string | The data-testid attribute for testing purposes. |

Responsibility

The CardGroup is responsive by default:

• Mobile (< 768px): Displays cards in a vertical column.
• Desktop (>= 768px): Displays cards in a horizontal row.

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.