@snack-uikit/card 0.20.12-preview-7c3c43bf.0 → 0.20.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/README.md +44 -13
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## <small>0.20.13 (2026-01-19)</small>
|
|
7
|
+
|
|
8
|
+
* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
|
|
9
|
+
* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
|
|
10
|
+
* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## <small>0.20.12 (2025-12-06)</small>
|
|
17
|
+
|
|
18
|
+
### Only dependencies have been changed
|
|
19
|
+
* [@snack-uikit/list@0.32.11](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## <small>0.20.11 (2025-12-01)</small>
|
|
7
26
|
|
|
8
27
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -5,21 +5,52 @@
|
|
|
5
5
|
|
|
6
6
|
[Changelog](./CHANGELOG.md)
|
|
7
7
|
|
|
8
|
+
## Description
|
|
9
|
+
|
|
10
|
+
- Пакет `@snack-uikit/card` предоставляет компонент `Card` для отображения структурированной информации в виде карточек с поддержкой интерактивности, выбора и различных вариантов оформления.
|
|
11
|
+
- Компонент поддерживает три размера (`s`, `m`, `l`), состояния выбора (`checked`), интерактивности (`disabled`), обводки (`outline`) и может работать как ссылка через проп `href`.
|
|
12
|
+
- Карточка собирается из основных частей: заголовка (`Card.Header`), изображения (`Card.Image`), произвольного контента (`children`), футера (`Card.Footer`) и функционального бейджа (`Card.FunctionBadge`).
|
|
13
|
+
- Заголовок (`Card.Header`) отображает заголовок, описание и метаинформацию с поддержкой усечения текста и эмблемы (иконка или картинка).
|
|
14
|
+
- Изображение (`Card.Image`) поддерживает три режима отображения: маленькое (`little`), среднее (`middle`) и фоновое (`background`) с опциональным эффектом затемнения.
|
|
15
|
+
- Футер (`Card.Footer`) имеет три варианта: промо-футер (`Card.Footer.Promo`) с кнопкой и блоком значений, футер с действиями (`Card.Footer.Action`) с основной и вторичной кнопками, и призыв к действию (`Card.Footer.CallToAction`) с текстом и иконкой.
|
|
16
|
+
- Функциональный бейдж (`Card.FunctionBadge`) отображает выпадающее меню с опциями и появляется при наведении на карточку или может быть всегда видимым через проп `badgeAlwaysVisible`.
|
|
17
|
+
- Компонент поддерживает режим массового выделения (`multipleSelection`) с отображением галочки при выборе, промо-бейдж для акций и полную поддержку клавиатурной навигации.
|
|
18
|
+
- Figma: [`Card`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A214604&mode=design).
|
|
19
|
+
|
|
8
20
|
## Example
|
|
9
21
|
|
|
10
|
-
```
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
```tsx
|
|
23
|
+
import { useState } from 'react';
|
|
24
|
+
import { Card } from '@snack-uikit/card';
|
|
25
|
+
import { KebabSVG, PlaceholderSVG } from '@snack-uikit/icons';
|
|
26
|
+
|
|
27
|
+
function Example() {
|
|
28
|
+
const [checked, setChecked] = useState(false);
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<Card
|
|
32
|
+
size="m"
|
|
33
|
+
checked={checked}
|
|
34
|
+
onClick={() => setChecked(!checked)}
|
|
35
|
+
multipleSelection
|
|
36
|
+
image={<Card.Image mode="little" src="/image.jpg" alt="Product image" />}
|
|
37
|
+
header={
|
|
38
|
+
<Card.Header
|
|
39
|
+
title="Название карточки"
|
|
40
|
+
description="Описание карточки с подробной информацией"
|
|
41
|
+
metadata="Метаинформация"
|
|
42
|
+
emblem={{ icon: PlaceholderSVG }}
|
|
43
|
+
truncate={{ title: 1, description: 2, metadata: 1 }}
|
|
44
|
+
/>
|
|
45
|
+
}
|
|
46
|
+
footer={<Card.Footer.Promo button={{ label: 'Действие', onClick: () => {} }} />}
|
|
47
|
+
functionBadge={<Card.FunctionBadge icon={<KebabSVG />} options={[]} />}
|
|
48
|
+
promoBadge="Акция"
|
|
49
|
+
>
|
|
50
|
+
Дополнительный контент карточки
|
|
51
|
+
</Card>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
23
54
|
```
|
|
24
55
|
|
|
25
56
|
[//]: DOCUMENTATION_SECTION_START
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Card",
|
|
7
|
-
"version": "0.20.
|
|
7
|
+
"version": "0.20.13",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/button": "0.19.
|
|
40
|
-
"@snack-uikit/icon-predefined": "0.7.
|
|
41
|
-
"@snack-uikit/icons": "0.27.
|
|
42
|
-
"@snack-uikit/list": "0.32.
|
|
43
|
-
"@snack-uikit/promo-tag": "0.7.
|
|
44
|
-
"@snack-uikit/tag": "0.15.
|
|
45
|
-
"@snack-uikit/truncate-string": "0.7.
|
|
46
|
-
"@snack-uikit/typography": "0.8.
|
|
47
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/button": "0.19.17",
|
|
40
|
+
"@snack-uikit/icon-predefined": "0.7.11",
|
|
41
|
+
"@snack-uikit/icons": "0.27.5",
|
|
42
|
+
"@snack-uikit/list": "0.32.12",
|
|
43
|
+
"@snack-uikit/promo-tag": "0.7.9",
|
|
44
|
+
"@snack-uikit/tag": "0.15.13",
|
|
45
|
+
"@snack-uikit/truncate-string": "0.7.7",
|
|
46
|
+
"@snack-uikit/typography": "0.8.12",
|
|
47
|
+
"@snack-uikit/utils": "4.0.1",
|
|
48
48
|
"classnames": "2.5.1",
|
|
49
49
|
"merge-refs": "1.3.0"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
|
|
52
52
|
}
|