# Card

## Installation
`npm i @snack-uikit/card`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/card` предоставляет компонент `Card` для отображения структурированной информации в виде карточек с поддержкой интерактивности, выбора и различных вариантов оформления.
- Компонент поддерживает три размера (`s`, `m`, `l`), состояния выбора (`checked`), интерактивности (`disabled`), обводки (`outline`) и может работать как ссылка через проп `href`.
- Карточка собирается из основных частей: заголовка (`Card.Header`), изображения (`Card.Image`), произвольного контента (`children`), футера (`Card.Footer`) и функционального бейджа (`Card.FunctionBadge`).
- Заголовок (`Card.Header`) отображает заголовок, описание и метаинформацию с поддержкой усечения текста и эмблемы (иконка или картинка).
- Изображение (`Card.Image`) поддерживает три режима отображения: маленькое (`little`), среднее (`middle`) и фоновое (`background`) с опциональным эффектом затемнения.
- Футер (`Card.Footer`) имеет три варианта: промо-футер (`Card.Footer.Promo`) с кнопкой и блоком значений, футер с действиями (`Card.Footer.Action`) с основной и вторичной кнопками, и призыв к действию (`Card.Footer.CallToAction`) с текстом и иконкой.
- Функциональный бейдж (`Card.FunctionBadge`) отображает выпадающее меню с опциями и появляется при наведении на карточку или может быть всегда видимым через проп `badgeAlwaysVisible`.
- Компонент поддерживает режим массового выделения (`multipleSelection`) с отображением галочки при выборе, промо-бейдж для акций и полную поддержку клавиатурной навигации.
- Figma: [`Card`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A214604&mode=design).

## Example

```tsx
import { useState } from 'react';
import { Card } from '@snack-uikit/card';
import { KebabSVG, PlaceholderSVG } from '@snack-uikit/icons';

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <Card
      size="m"
      checked={checked}
      onClick={() => setChecked(!checked)}
      multipleSelection
      image={<Card.Image mode="little" src="/image.jpg" alt="Product image" />}
      header={
        <Card.Header
          title="Название карточки"
          description="Описание карточки с подробной информацией"
          metadata="Метаинформация"
          emblem={{ icon: PlaceholderSVG }}
          truncate={{ title: 1, description: 2, metadata: 1 }}
        />
      }
      footer={<Card.Footer.Promo button={{ label: 'Действие', onClick: () => {} }} />}
      functionBadge={<Card.FunctionBadge icon={<KebabSVG />} options={[]} />}
      promoBadge="Акция"
    >
      Дополнительный контент карточки
    </Card>
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Card
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| disabled | `boolean` | - | Управление состоянием интерактивности |
| checked | `boolean` | - | Управление состоянием выбран/не выбран |
| name | `string` | - | Имя инпута в dom-дереве |
| outline | `boolean` | - | Управление состоянием наличия обводки |
| multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
| onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
| promoBadge | `string \| Pick<PromoTagProps, "text" \| "appearance">` | - | PromoBadge |
| children | `ReactNode` | - | Вложенный контент |
| header | `ReactElement<HeaderProps, string \| JSXElementConstructor<any>>` | - | Вложенный Header |
| footer | `ReactNode` | - | Вложенный Footer |
| image | `ReactNode` | - | Вложенный Image |
| functionBadge | `ReactNode` | - | Вложенный FunctionBadge |
| className | `string` | - | CSS-класс для элемента с контентом |
| href | `string` | - | Ссылка карточки |
| badgeAlwaysVisible | `boolean` | - | Всегда показывать FunctionBadge |
| onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
| ref | `LegacyRef<HTMLDivElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
| key | `Key` | - |  |


[//]: DOCUMENTATION_SECTION_END