import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="Cards/Overview" />

# Cards

Cards display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Card columns are rendered using the standard `MUI Grid` component and are defined by the `columns` property that expects an array of objects, where each “column” entry defines alignment (left, center, or right), optional flex, minWidth/maxWidth, children (ReactNode), event listeners, and so on. Columns must be of the following type: `CardColumnProps[]` (note that `field` is the only required property, since it is the column identifier).

Possible card states are **default**, **hover**, and **active**, and can be set programmatically or via pointer/keyboard (hover and focus events). The columns of the card are separated by a vertical divider with a gradient (the design of the divider is the same as in the `Header` component of the layout). The actions column is implemented similarly to the `ActionButtons` custom field type component in the `DataGrid`.

### Group

<Story id="cards-card--group" />

### Application

<Story id="cards-card--application" />

### Gateways

<Story id="cards-card--gateways" />

# Card Grid

`CardGrid` is a structure consisting of a header and rows based on the `Card` component.

For quick deployment and ease of use of the “rows” of the card grid, we have created a set of built-in column type definitions. The `CardGridColumnTypes` type defines a list of column types, and the `getColumnTypes()` helper function returns a map of types with their cell rendering components. As for the "header" card, a stylized transparent card is rendered without vertical padding and dividers.

The following are built-in column types:

- `'actionButtons'`
- `'avatarGroup'`
- `'button'`
- `'link'`
- `'switch'`
- `'textGroup'`
- `'textList'`.

For example, the following story is created using only the built-in column types.

<Story id="cards-card-grid--groups" />

### Props Transforming

Sometimes it may be necessary to transform the layout on the fly and dynamically display visually different cards within the grid. This can be done using the `getCardGridRowProps` parameter of the `CardGrid` component along with `hideColumn` and `hideDivider` props of the card columns.

Below is an example of a story created using this method.

<Story id="cards-card-grid--integrations" />