@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 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({ appearance: APPEARANCE_TO_COLOR_MAP[appearance] }, link, { textMode: 'default', external: true, 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' })))] }))] })));
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({ appearance: APPEARANCE_TO_COLOR_MAP[appearance] }, link, { textMode: 'on-accent', external: true, 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' }))] })] })));
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.10.5",
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": "6a5d30f58b1ca79c29b9f4b3078edbd8c02e15a4"
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
- appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
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
- appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
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
  />