@snack-uikit/alert 0.10.5 → 0.10.6-preview-673c1a37.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/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 +1 -2
- package/src/components/AlertTop/AlertTop.tsx +1 -2
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({ appearance: APPEARANCE_TO_COLOR_MAP[appearance] }, link, { textMode: 'default',
|
|
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({ appearance: APPEARANCE_TO_COLOR_MAP[appearance] }, link, { 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({ appearance: APPEARANCE_TO_COLOR_MAP[appearance] }, link, { textMode: 'on-accent',
|
|
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({ appearance: APPEARANCE_TO_COLOR_MAP[appearance] }, link, { 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.10.
|
|
7
|
+
"version": "0.10.6-preview-673c1a37.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": "e8c6098708f982d92c29ffaeb7de75cec482ab82"
|
|
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
|
/** Внешний вид */
|
|
@@ -90,7 +90,6 @@ export function Alert({
|
|
|
90
90
|
appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
|
|
91
91
|
{...link}
|
|
92
92
|
textMode='default'
|
|
93
|
-
external
|
|
94
93
|
size='m'
|
|
95
94
|
data-test-id='alert__link'
|
|
96
95
|
/>
|
|
@@ -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
|
/** Колбек закрытия */
|
|
@@ -99,7 +99,6 @@ export function AlertTop({
|
|
|
99
99
|
appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
|
|
100
100
|
{...link}
|
|
101
101
|
textMode='on-accent'
|
|
102
|
-
external
|
|
103
102
|
size='m'
|
|
104
103
|
data-test-id='alert-top__link'
|
|
105
104
|
/>
|