@snack-uikit/alert 0.10.5 → 0.11.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.
- package/CHANGELOG.md +11 -0
- package/README.md +2 -2
- package/dist/components/Alert/Alert.d.ts +1 -1
- package/dist/components/Alert/Alert.js +1 -1
- package/dist/components/AlertTop/AlertTop.d.ts +1 -1
- package/dist/components/AlertTop/AlertTop.js +1 -1
- package/package.json +2 -2
- package/src/components/Alert/Alert.tsx +3 -3
- package/src/components/AlertTop/AlertTop.tsx +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
# 0.11.0 (2024-05-31)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **FF-4718:** add external prop into link ([29ed86b](https://github.com/cloud-ru-tech/snack-uikit/commit/29ed86bb1b60ad6289f0cbcdb4f9e46b42b6f59b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 0.10.5 (2024-05-30)
|
|
7
18
|
|
|
8
19
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -58,7 +58,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
|
|
|
58
58
|
| icon | `boolean` | true | Отображать иконку |
|
|
59
59
|
| title | `string` | - | Заголовок |
|
|
60
60
|
| truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
|
|
61
|
-
| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | Cсылка |
|
|
61
|
+
| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance" \| "external">` | - | Cсылка |
|
|
62
62
|
| onClose | `() => void` | - | Колбек закрытия |
|
|
63
63
|
| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
|
|
64
64
|
| className | `string` | - | CSS-класс |
|
|
@@ -72,7 +72,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
|
|
|
72
72
|
| icon | `boolean` | true | Отображать иконку |
|
|
73
73
|
| title | `string` | - | Заголовок |
|
|
74
74
|
| truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
|
|
75
|
-
| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | Cсылка |
|
|
75
|
+
| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance" \| "external">` | - | Cсылка |
|
|
76
76
|
| action | `AlertButtonProps` | - | Кнопка дополнительного действия |
|
|
77
77
|
| onClose | `() => void` | - | Колбек закрытия |
|
|
78
78
|
| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
|
|
@@ -19,7 +19,7 @@ export type AlertProps = WithSupportProps<{
|
|
|
19
19
|
/** Описание */
|
|
20
20
|
description: ReactNode;
|
|
21
21
|
/** Cсылка */
|
|
22
|
-
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
|
|
22
|
+
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance' | 'external'>;
|
|
23
23
|
/** Колбек закрытия */
|
|
24
24
|
onClose?: () => void;
|
|
25
25
|
/** Внешний вид */
|
|
@@ -25,5 +25,5 @@ import styles from './styles.module.css';
|
|
|
25
25
|
export function Alert(_a) {
|
|
26
26
|
var _b;
|
|
27
27
|
var { icon = true, title, truncate, link, description, onClose, appearance = APPEARANCE.Neutral, className, actions } = _a, rest = __rest(_a, ["icon", "title", "truncate", "link", "description", "onClose", "appearance", "className", "actions"]);
|
|
28
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.alert, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], children: [_jsxs("div", { className: styles.body, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', children: getIcon(appearance) })), _jsxs("div", { className: styles.contentLayout, children: [title && (_jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1, className: styles.title, "data-test-id": 'alert__title' })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({
|
|
28
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.alert, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], children: [_jsxs("div", { className: styles.body, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', children: getIcon(appearance) })), _jsxs("div", { className: styles.contentLayout, children: [title && (_jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1, className: styles.title, "data-test-id": 'alert__title' })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({ external: true }, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'default', size: 'm', "data-test-id": 'alert__link' })) }))] }), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP[appearance], icon: _jsx(CrossSVG, {}), variant: 'simple', dataTestId: 'alert__close-button' }))] }), actions && (_jsxs("div", { className: styles.footer, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple' }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple' })))] }))] })));
|
|
29
29
|
}
|
|
@@ -19,7 +19,7 @@ export type AlertTopProps = WithSupportProps<{
|
|
|
19
19
|
/** Описание */
|
|
20
20
|
description: ReactNode;
|
|
21
21
|
/** Cсылка */
|
|
22
|
-
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
|
|
22
|
+
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance' | 'external'>;
|
|
23
23
|
/** Кнопка дополнительного действия */
|
|
24
24
|
action?: AlertButtonProps;
|
|
25
25
|
/** Колбек закрытия */
|
|
@@ -26,5 +26,5 @@ import styles from './styles.module.css';
|
|
|
26
26
|
export function AlertTop(_a) {
|
|
27
27
|
var _b;
|
|
28
28
|
var { icon = true, title, description, link, onClose, truncate, appearance = APPEARANCE.Neutral, action, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "onClose", "truncate", "appearance", "action", "className"]);
|
|
29
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.alertTop, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], children: [_jsxs("div", { className: styles.contentWrapper, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__icon', children: getIcon(appearance) })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textLayout, children: [title && (_jsx("div", { className: styles.title, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__title', children: _jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1 }) })), _jsx("span", { className: styles.description, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__description', children: description })] }), link && (_jsx("span", { children: _jsx(Link, Object.assign({
|
|
29
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.alertTop, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], children: [_jsxs("div", { className: styles.contentWrapper, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__icon', children: getIcon(appearance) })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textLayout, children: [title && (_jsx("div", { className: styles.title, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__title', children: _jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1 }) })), _jsx("span", { className: styles.description, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__description', children: description })] }), link && (_jsx("span", { children: _jsx(Link, Object.assign({ external: true }, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'on-accent', size: 'm', "data-test-id": 'alert-top__link' })) }))] })] }), _jsxs("div", { className: styles.actions, children: [action && _jsx(AlertButton, Object.assign({}, action, { appearance: APPEARANCE_TO_COLOR_MAP_INVERT[appearance], variant: 'tonal' })), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP_INVERT[appearance], icon: _jsx(CrossSVG, {}), variant: 'tonal', dataTestId: 'alert-top__close-button' }))] })] })));
|
|
30
30
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Alert",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.11.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"@snack-uikit/utils": "3.3.0",
|
|
39
39
|
"classnames": "2.3.2"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "13e85b0e3b38f78596e86b5765248598b2aa0fa5"
|
|
42
42
|
}
|
|
@@ -28,7 +28,7 @@ export type AlertProps = WithSupportProps<{
|
|
|
28
28
|
/** Описание */
|
|
29
29
|
description: ReactNode;
|
|
30
30
|
/** Cсылка */
|
|
31
|
-
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
|
|
31
|
+
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance' | 'external'>;
|
|
32
32
|
/** Колбек закрытия */
|
|
33
33
|
onClose?: () => void;
|
|
34
34
|
/** Внешний вид */
|
|
@@ -87,10 +87,10 @@ export function Alert({
|
|
|
87
87
|
{link && (
|
|
88
88
|
<span>
|
|
89
89
|
<Link
|
|
90
|
-
|
|
90
|
+
external
|
|
91
91
|
{...link}
|
|
92
|
+
appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
|
|
92
93
|
textMode='default'
|
|
93
|
-
external
|
|
94
94
|
size='m'
|
|
95
95
|
data-test-id='alert__link'
|
|
96
96
|
/>
|
|
@@ -29,7 +29,7 @@ export type AlertTopProps = WithSupportProps<{
|
|
|
29
29
|
/** Описание */
|
|
30
30
|
description: ReactNode;
|
|
31
31
|
/** Cсылка */
|
|
32
|
-
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
|
|
32
|
+
link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance' | 'external'>;
|
|
33
33
|
/** Кнопка дополнительного действия */
|
|
34
34
|
action?: AlertButtonProps;
|
|
35
35
|
/** Колбек закрытия */
|
|
@@ -96,10 +96,10 @@ export function AlertTop({
|
|
|
96
96
|
{link && (
|
|
97
97
|
<span>
|
|
98
98
|
<Link
|
|
99
|
-
|
|
99
|
+
external
|
|
100
100
|
{...link}
|
|
101
|
+
appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
|
|
101
102
|
textMode='on-accent'
|
|
102
|
-
external
|
|
103
103
|
size='m'
|
|
104
104
|
data-test-id='alert-top__link'
|
|
105
105
|
/>
|