@snack-uikit/card 0.7.0 → 0.7.1-preview-8c5cb827.0
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.
|
@@ -4,8 +4,12 @@ import { Size } from '../../types';
|
|
|
4
4
|
export type HeaderProps = WithSupportProps<{
|
|
5
5
|
/** Заголовок */
|
|
6
6
|
title: string;
|
|
7
|
+
/** Максимальное кол-во строк в заголовке */
|
|
8
|
+
titleMaxLines?: number;
|
|
7
9
|
/** Подзаголовок */
|
|
8
10
|
description?: string;
|
|
11
|
+
/** Максимальное кол-во строк в подзаголовке */
|
|
12
|
+
descriptionMaxLines?: number;
|
|
9
13
|
/** Метаинформация */
|
|
10
14
|
metadata?: string;
|
|
11
15
|
/** Эмблема иконка/картинка */
|
|
@@ -15,4 +19,4 @@ export type HeaderProps = WithSupportProps<{
|
|
|
15
19
|
/** Размер */
|
|
16
20
|
size?: Size;
|
|
17
21
|
}>;
|
|
18
|
-
export declare function Header({ title, description, metadata, emblem, className, size: sizeProp, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function Header({ title, titleMaxLines, description, descriptionMaxLines, metadata, emblem, className, size: sizeProp, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -20,8 +20,8 @@ import { Emblem } from '../../helperComponents';
|
|
|
20
20
|
import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP } from './constants';
|
|
21
21
|
import styles from './styles.module.css';
|
|
22
22
|
export function Header(_a) {
|
|
23
|
-
var { title, description, metadata, emblem, className, size: sizeProp } = _a, rest = __rest(_a, ["title", "description", "metadata", "emblem", "className", "size"]);
|
|
23
|
+
var { title, titleMaxLines = 1, description, descriptionMaxLines = 2, metadata, emblem, className, size: sizeProp } = _a, rest = __rest(_a, ["title", "titleMaxLines", "description", "descriptionMaxLines", "metadata", "emblem", "className", "size"]);
|
|
24
24
|
const { size: sizeContext } = useCardContext();
|
|
25
25
|
const size = sizeProp || sizeContext;
|
|
26
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.titleLayout, className) }, excludeSupportProps(rest), { "data-size": size, children: [emblem && _jsx(Emblem, Object.assign({}, emblem)), _jsxs("div", { className: styles.contentLayout, children: [_jsx(Typography, { family: 'sans', size: TITLE_SIZE_MAP[size], purpose: 'title', className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { variant: 'end', maxLines:
|
|
26
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.titleLayout, className) }, excludeSupportProps(rest), { "data-size": size, children: [emblem && _jsx(Emblem, Object.assign({}, emblem)), _jsxs("div", { className: styles.contentLayout, children: [_jsx(Typography, { family: 'sans', size: TITLE_SIZE_MAP[size], purpose: 'title', className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { variant: 'end', maxLines: titleMaxLines, text: title }) }), metadata && (_jsx(Typography.SansBodyS, { className: styles.metadata, children: _jsx(TruncateString, { variant: 'end', maxLines: 1, text: metadata, "data-test-id": TEST_IDS.metadata }) })), description && (_jsx(Typography, { family: 'sans', size: DESCRIPTION_SIZE_MAP[size], purpose: 'body', className: styles.description, children: _jsx(TruncateString, { variant: 'end', maxLines: descriptionMaxLines, text: description, "data-test-id": TEST_IDS.description }) }))] })] })));
|
|
27
27
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Card",
|
|
7
|
-
"version": "0.7.0",
|
|
7
|
+
"version": "0.7.1-preview-8c5cb827.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"@snack-uikit/utils": "3.2.0",
|
|
43
43
|
"classnames": "2.3.2"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "b861901b3b8a98d77144ae35c6d5af36d0b89b3f"
|
|
46
46
|
}
|
|
@@ -14,8 +14,12 @@ import styles from './styles.module.scss';
|
|
|
14
14
|
export type HeaderProps = WithSupportProps<{
|
|
15
15
|
/** Заголовок */
|
|
16
16
|
title: string;
|
|
17
|
+
/** Максимальное кол-во строк в заголовке */
|
|
18
|
+
titleMaxLines?: number;
|
|
17
19
|
/** Подзаголовок */
|
|
18
20
|
description?: string;
|
|
21
|
+
/** Максимальное кол-во строк в подзаголовке */
|
|
22
|
+
descriptionMaxLines?: number;
|
|
19
23
|
/** Метаинформация */
|
|
20
24
|
metadata?: string;
|
|
21
25
|
/** Эмблема иконка/картинка */
|
|
@@ -26,7 +30,17 @@ export type HeaderProps = WithSupportProps<{
|
|
|
26
30
|
size?: Size;
|
|
27
31
|
}>;
|
|
28
32
|
|
|
29
|
-
export function Header({
|
|
33
|
+
export function Header({
|
|
34
|
+
title,
|
|
35
|
+
titleMaxLines = 1,
|
|
36
|
+
description,
|
|
37
|
+
descriptionMaxLines = 2,
|
|
38
|
+
metadata,
|
|
39
|
+
emblem,
|
|
40
|
+
className,
|
|
41
|
+
size: sizeProp,
|
|
42
|
+
...rest
|
|
43
|
+
}: HeaderProps) {
|
|
30
44
|
const { size: sizeContext } = useCardContext();
|
|
31
45
|
|
|
32
46
|
const size = sizeProp || sizeContext;
|
|
@@ -43,7 +57,7 @@ export function Header({ title, description, metadata, emblem, className, size:
|
|
|
43
57
|
className={styles.title}
|
|
44
58
|
data-test-id={TEST_IDS.title}
|
|
45
59
|
>
|
|
46
|
-
<TruncateString variant='end' maxLines={
|
|
60
|
+
<TruncateString variant='end' maxLines={titleMaxLines} text={title} />
|
|
47
61
|
</Typography>
|
|
48
62
|
|
|
49
63
|
{metadata && (
|
|
@@ -54,7 +68,12 @@ export function Header({ title, description, metadata, emblem, className, size:
|
|
|
54
68
|
|
|
55
69
|
{description && (
|
|
56
70
|
<Typography family='sans' size={DESCRIPTION_SIZE_MAP[size]} purpose='body' className={styles.description}>
|
|
57
|
-
<TruncateString
|
|
71
|
+
<TruncateString
|
|
72
|
+
variant='end'
|
|
73
|
+
maxLines={descriptionMaxLines}
|
|
74
|
+
text={description}
|
|
75
|
+
data-test-id={TEST_IDS.description}
|
|
76
|
+
/>
|
|
58
77
|
</Typography>
|
|
59
78
|
)}
|
|
60
79
|
</div>
|