@snack-uikit/alert 0.9.2 → 0.10.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +6 -4
  3. package/dist/components/Alert/Alert.d.ts +12 -3
  4. package/dist/components/Alert/Alert.js +3 -2
  5. package/dist/components/AlertTop/AlertTop.d.ts +12 -3
  6. package/dist/components/AlertTop/AlertTop.js +3 -2
  7. package/package.json +2 -2
  8. package/src/components/Alert/Alert.tsx +21 -4
  9. package/src/components/AlertTop/AlertTop.tsx +14 -4
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.10.0 (2024-03-26)
7
+
8
+
9
+ ### Features
10
+
11
+ * **PDS-40:** add title truncate prop; add link appearance prop; make description as ReactNode prop ([01d2890](https://github.com/cloud-ru-tech/snack-uikit/commit/01d2890b5c9dbb63799087cb333401d1ef6e0b79))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.9.2 (2024-03-26)
7
18
 
8
19
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -54,10 +54,11 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
54
54
  ### Props
55
55
  | name | type | default value | description |
56
56
  |------|------|---------------|-------------|
57
- | description* | `string` | - | Описание |
57
+ | description* | `ReactNode` | - | Описание |
58
58
  | icon | `boolean` | true | Отображать иконку |
59
59
  | title | `string` | - | Заголовок |
60
- | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href">` | - | Cсылка |
60
+ | truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
61
+ | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | Cсылка |
61
62
  | onClose | `() => void` | - | Колбек закрытия |
62
63
  | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
63
64
  | className | `string` | - | CSS-класс |
@@ -67,10 +68,11 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
67
68
  ### Props
68
69
  | name | type | default value | description |
69
70
  |------|------|---------------|-------------|
70
- | description* | `string` | - | Описание |
71
+ | description* | `ReactNode` | - | Описание |
71
72
  | icon | `boolean` | true | Отображать иконку |
72
73
  | title | `string` | - | Заголовок |
73
- | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href">` | - | Cсылка |
74
+ | truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
75
+ | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | Cсылка |
74
76
  | action | `AlertButtonProps` | - | Кнопка дополнительного действия |
75
77
  | onClose | `() => void` | - | Колбек закрытия |
76
78
  | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
package/dist/components/Alert/Alert.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ReactNode } from 'react';
1
2
  import { LinkProps } from '@snack-uikit/link';
2
3
  import { WithSupportProps } from '@snack-uikit/utils';
3
4
  import { AlertButtonProps } from '../../helperComponents';
@@ -7,10 +8,18 @@ export type AlertProps = WithSupportProps<{
7
8
  icon?: boolean;
8
9
  /** Заголовок */
9
10
  title?: string;
11
+ /**
12
+ * Максимальное кол-во строк
13
+ * <br> - `title` - в заголовке
14
+ * @default '{ <br>title: 1 }'
15
+ */
16
+ truncate?: {
17
+ title?: number;
18
+ };
10
19
  /** Описание */
11
- description: string;
20
+ description: ReactNode;
12
21
  /** Cсылка */
13
- link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href'>;
22
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
14
23
  /** Колбек закрытия */
15
24
  onClose?: () => void;
16
25
  /** Внешний вид */
@@ -26,4 +35,4 @@ export type AlertProps = WithSupportProps<{
26
35
  /**
27
36
  * Компонент для отображения уведомления.
28
37
  */
29
- export declare function Alert({ icon, title, link, description, onClose, appearance, className, actions, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
38
+ export declare function Alert({ icon, title, truncate, link, description, onClose, appearance, className, actions, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/Alert/Alert.js CHANGED
@@ -23,6 +23,7 @@ import styles from './styles.module.css';
23
23
  * Компонент для отображения уведомления.
24
24
  */
25
25
  export function Alert(_a) {
26
- var { icon = true, title, link, description, onClose, appearance = APPEARANCE.Neutral, className, actions } = _a, rest = __rest(_a, ["icon", "title", "link", "description", "onClose", "appearance", "className", "actions"]);
27
- 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: 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({}, link, { textMode: 'default', external: true, appearance: APPEARANCE_TO_COLOR_MAP[appearance], 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' })))] }))] })));
26
+ var _b;
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
29
  }
package/dist/components/AlertTop/AlertTop.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ReactNode } from 'react';
1
2
  import { LinkProps } from '@snack-uikit/link';
2
3
  import { WithSupportProps } from '@snack-uikit/utils';
3
4
  import { AlertButtonProps } from '../../helperComponents';
@@ -7,10 +8,18 @@ export type AlertTopProps = WithSupportProps<{
7
8
  icon?: boolean;
8
9
  /** Заголовок */
9
10
  title?: string;
11
+ /**
12
+ * Максимальное кол-во строк
13
+ * <br> - `title` - в заголовке
14
+ * @default '{ <br>title: 1 }'
15
+ */
16
+ truncate?: {
17
+ title?: number;
18
+ };
10
19
  /** Описание */
11
- description: string;
20
+ description: ReactNode;
12
21
  /** Cсылка */
13
- link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href'>;
22
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
14
23
  /** Кнопка дополнительного действия */
15
24
  action?: AlertButtonProps;
16
25
  /** Колбек закрытия */
@@ -23,4 +32,4 @@ export type AlertTopProps = WithSupportProps<{
23
32
  /**
24
33
  * Компонент для отображения уведомления вверху экрана.
25
34
  */
26
- export declare function AlertTop({ icon, title, description, link, onClose, appearance, action, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;
35
+ export declare function AlertTop({ icon, title, description, link, onClose, truncate, appearance, action, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/AlertTop/AlertTop.js CHANGED
@@ -24,6 +24,7 @@ import styles from './styles.module.css';
24
24
  * Компонент для отображения уведомления вверху экрана.
25
25
  */
26
26
  export function AlertTop(_a) {
27
- var { icon = true, title, description, link, onClose, appearance = APPEARANCE.Neutral, action, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "onClose", "appearance", "action", "className"]);
28
- 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: 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({}, link, { textMode: 'on-accent', external: true, appearance: APPEARANCE_TO_COLOR_MAP[appearance], 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' }))] })] })));
27
+ var _b;
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
30
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Alert",
7
- "version": "0.9.2",
7
+ "version": "0.10.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -38,5 +38,5 @@
38
38
  "@snack-uikit/utils": "3.2.0",
39
39
  "classnames": "2.3.2"
40
40
  },
41
- "gitHead": "234be77560f8bd1b3a4b567e2ec88f3a89c3631f"
41
+ "gitHead": "220ffd8479f187fb0983dda6a0c6c3f9514f7d5a"
42
42
  }
package/src/components/Alert/Alert.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import cn from 'classnames';
2
+ import { ReactNode } from 'react';
2
3
 
3
4
  import { CrossSVG } from '@snack-uikit/icons';
4
5
  import { Link, LinkProps } from '@snack-uikit/link';
@@ -16,10 +17,18 @@ export type AlertProps = WithSupportProps<{
16
17
  icon?: boolean;
17
18
  /** Заголовок */
18
19
  title?: string;
20
+ /**
21
+ * Максимальное кол-во строк
22
+ * <br> - `title` - в заголовке
23
+ * @default '{ <br>title: 1 }'
24
+ */
25
+ truncate?: {
26
+ title?: number;
27
+ };
19
28
  /** Описание */
20
- description: string;
29
+ description: ReactNode;
21
30
  /** Cсылка */
22
- link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href'>;
31
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
23
32
  /** Колбек закрытия */
24
33
  onClose?: () => void;
25
34
  /** Внешний вид */
@@ -39,6 +48,7 @@ export type AlertProps = WithSupportProps<{
39
48
  export function Alert({
40
49
  icon = true,
41
50
  title,
51
+ truncate,
42
52
  link,
43
53
  description,
44
54
  onClose,
@@ -61,7 +71,14 @@ export function Alert({
61
71
  )}
62
72
 
63
73
  <div className={styles.contentLayout}>
64
- {title && <TruncateString text={title} maxLines={1} className={styles.title} data-test-id='alert__title' />}
74
+ {title && (
75
+ <TruncateString
76
+ text={title}
77
+ maxLines={truncate?.title ?? 1}
78
+ className={styles.title}
79
+ data-test-id='alert__title'
80
+ />
81
+ )}
65
82
 
66
83
  <span data-test-id='alert__description' className={styles.description}>
67
84
  {description}
@@ -70,10 +87,10 @@ export function Alert({
70
87
  {link && (
71
88
  <span>
72
89
  <Link
90
+ appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
73
91
  {...link}
74
92
  textMode='default'
75
93
  external
76
- appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
77
94
  size='m'
78
95
  data-test-id='alert__link'
79
96
  />
package/src/components/AlertTop/AlertTop.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import cn from 'classnames';
2
+ import { ReactNode } from 'react';
2
3
 
3
4
  import { CrossSVG } from '@snack-uikit/icons';
4
5
  import { Link, LinkProps } from '@snack-uikit/link';
@@ -17,10 +18,18 @@ export type AlertTopProps = WithSupportProps<{
17
18
  icon?: boolean;
18
19
  /** Заголовок */
19
20
  title?: string;
21
+ /**
22
+ * Максимальное кол-во строк
23
+ * <br> - `title` - в заголовке
24
+ * @default '{ <br>title: 1 }'
25
+ */
26
+ truncate?: {
27
+ title?: number;
28
+ };
20
29
  /** Описание */
21
- description: string;
30
+ description: ReactNode;
22
31
  /** Cсылка */
23
- link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href'>;
32
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
24
33
  /** Кнопка дополнительного действия */
25
34
  action?: AlertButtonProps;
26
35
  /** Колбек закрытия */
@@ -40,6 +49,7 @@ export function AlertTop({
40
49
  description,
41
50
  link,
42
51
  onClose,
52
+ truncate,
43
53
  appearance = APPEARANCE.Neutral,
44
54
  action,
45
55
  className,
@@ -70,7 +80,7 @@ export function AlertTop({
70
80
  data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
71
81
  data-test-id='alert-top__title'
72
82
  >
73
- <TruncateString text={title} maxLines={1} />
83
+ <TruncateString text={title} maxLines={truncate?.title ?? 1} />
74
84
  </div>
75
85
  )}
76
86
 
@@ -86,10 +96,10 @@ export function AlertTop({
86
96
  {link && (
87
97
  <span>
88
98
  <Link
99
+ appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
89
100
  {...link}
90
101
  textMode='on-accent'
91
102
  external
92
- appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
93
103
  size='m'
94
104
  data-test-id='alert-top__link'
95
105
  />