@snack-uikit/alert 0.11.4 → 0.11.5-preview-a882321d.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 (11) hide show
  1. package/README.md +2 -2
  2. package/dist/components/Alert/Alert.d.ts +1 -1
  3. package/dist/components/Alert/Alert.js +1 -1
  4. package/dist/components/Alert/styles.module.css +6 -6
  5. package/dist/components/AlertTop/AlertTop.d.ts +1 -1
  6. package/dist/components/AlertTop/AlertTop.js +1 -1
  7. package/dist/components/AlertTop/styles.module.css +5 -5
  8. package/dist/helperComponents/styles.module.css +8 -8
  9. package/package.json +3 -3
  10. package/src/components/Alert/Alert.tsx +1 -2
  11. 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" \| "external">` | - | Cсылка |
61
+ | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | 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" \| "external">` | - | Cсылка |
75
+ | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | Cсылка |
76
76
  | action | `AlertButtonProps` | - | Кнопка дополнительного действия |
77
77
  | onClose | `() => void` | - | Колбек закрытия |
78
78
  | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
package/dist/components/Alert/Alert.d.ts CHANGED
@@ -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' | 'external'>;
22
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
23
23
  /** Колбек закрытия */
24
24
  onClose?: () => void;
25
25
  /** Внешний вид */
package/dist/components/Alert/Alert.js CHANGED
@@ -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({ 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' })))] }))] })));
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({}, 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
  }
package/dist/components/Alert/styles.module.css CHANGED
@@ -13,8 +13,8 @@
13
13
  border-style:solid;
14
14
  }
15
15
  .alert[data-color=neutral]{
16
- background-color:var(--sys-neutral-background, #f1f2f6);
17
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
16
+ background-color:var(--sys-neutral-background, #eeeff3);
17
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
18
18
  }
19
19
  .alert[data-color=primary]{
20
20
  background-color:var(--sys-primary-background, #f6effe);
@@ -45,7 +45,7 @@
45
45
  height:var(--size-icon-container-s, 24px);
46
46
  }
47
47
  .icon[data-color=neutral]{
48
- color:var(--sys-neutral-accent-default, #6f717c);
48
+ color:var(--sys-neutral-accent-default, #787b8a);
49
49
  }
50
50
  .icon[data-color=primary]{
51
51
  color:var(--sys-primary-accent-default, #794ed3);
@@ -54,7 +54,7 @@
54
54
  color:var(--sys-red-accent-default, #cd3c3c);
55
55
  }
56
56
  .icon[data-color=yellow]{
57
- color:var(--sys-yellow-accent-default, #fdca46);
57
+ color:var(--sys-yellow-accent-default, #ffc443);
58
58
  }
59
59
  .icon[data-color=green]{
60
60
  color:var(--sys-green-accent-default, #57b762);
@@ -79,7 +79,7 @@
79
79
  font-size:var(--sans-title-s-font-size, 14px);
80
80
  letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
81
81
  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
82
- color:var(--sys-neutral-text-main, #33333b);
82
+ color:var(--sys-neutral-text-main, #33343f);
83
83
  }
84
84
 
85
85
  .description{
@@ -89,7 +89,7 @@
89
89
  font-size:var(--sans-body-m-font-size, 14px);
90
90
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
91
91
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
92
- color:var(--sys-neutral-text-support, #656771);
92
+ color:var(--sys-neutral-text-support, #6d707f);
93
93
  word-wrap:break-word;
94
94
  }
95
95
 
package/dist/components/AlertTop/AlertTop.d.ts CHANGED
@@ -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' | 'external'>;
22
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
23
23
  /** Кнопка дополнительного действия */
24
24
  action?: AlertButtonProps;
25
25
  /** Колбек закрытия */
package/dist/components/AlertTop/AlertTop.js CHANGED
@@ -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({ 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' }))] })] })));
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({}, 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/dist/components/AlertTop/styles.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  box-sizing:border-box;
10
10
  }
11
11
  .alertTop[data-color=invert-neutral]{
12
- background-color:var(--sys-invert-neutral-background, #202025);
12
+ background-color:var(--sys-invert-neutral-background, #282832);
13
13
  }
14
14
  .alertTop[data-color=primary]{
15
15
  background-color:var(--sys-primary-accent-default, #794ed3);
@@ -18,7 +18,7 @@
18
18
  background-color:var(--sys-red-accent-default, #cd3c3c);
19
19
  }
20
20
  .alertTop[data-color=yellow]{
21
- background-color:var(--sys-yellow-accent-default, #fdca46);
21
+ background-color:var(--sys-yellow-accent-default, #ffc443);
22
22
  }
23
23
  .alertTop[data-color=green]{
24
24
  background-color:var(--sys-green-accent-default, #57b762);
@@ -30,7 +30,7 @@
30
30
  justify-content:center;
31
31
  }
32
32
  .icon[data-color=invert-neutral]{
33
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
33
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
34
34
  }
35
35
  .icon[data-color=primary]{
36
36
  color:var(--sys-primary-on-accent, #fdfbff);
@@ -58,7 +58,7 @@
58
58
  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
59
59
  }
60
60
  .title[data-color=invert-neutral]{
61
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
61
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
62
62
  }
63
63
  .title[data-color=primary]{
64
64
  color:var(--sys-primary-on-accent, #fdfbff);
@@ -83,7 +83,7 @@
83
83
  word-wrap:break-word;
84
84
  }
85
85
  .description[data-color=invert-neutral]{
86
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
86
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
87
87
  }
88
88
  .description[data-color=primary]{
89
89
  color:var(--sys-primary-on-accent, #fdfbff);
package/dist/helperComponents/styles.module.css CHANGED
@@ -15,7 +15,7 @@
15
15
  font-weight:var(--sans-label-l-font-weight, Semibold);
16
16
  line-height:var(--sans-label-l-line-height, 20px);
17
17
  font-size:var(--sans-label-l-font-size, 14px);
18
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
18
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
19
19
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
20
20
  }
21
21
  .alertButton .icon{
@@ -44,17 +44,17 @@
44
44
  outline-width:var(--border-state-focus-s-border-width, 2px);
45
45
  outline-style:var(--border-state-focus-s-border-style, solid);
46
46
  outline-color:var(--border-state-focus-s-border-color, );
47
- outline-color:var(--sys-available-complementary, #141415);
47
+ outline-color:var(--sys-available-complementary, #15151b);
48
48
  outline-offset:var(--spacing-state-focus-offset, 2px);
49
49
  }
50
50
  .alertButton[data-variant=simple][data-appearance=neutral]{
51
- color:var(--sys-neutral-text-support, #656771);
51
+ color:var(--sys-neutral-text-support, #6d707f);
52
52
  }
53
53
  .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
54
- color:var(--sys-neutral-text-light, #868892);
54
+ color:var(--sys-neutral-text-light, #8b8e9b);
55
55
  }
56
56
  .alertButton[data-variant=simple][data-appearance=neutral]:active{
57
- color:var(--sys-neutral-text-main, #33333b);
57
+ color:var(--sys-neutral-text-main, #33343f);
58
58
  }
59
59
  .alertButton[data-variant=simple][data-appearance=primary]{
60
60
  color:var(--sys-primary-text-support, #5b4796);
@@ -66,7 +66,7 @@
66
66
  color:var(--sys-primary-text-main, #382a62);
67
67
  }
68
68
  .alertButton[data-variant=simple][data-appearance=red]{
69
- color:var(--sys-red-text-support, #ab423e);
69
+ color:var(--sys-red-text-support, #a63d3a);
70
70
  }
71
71
  .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
72
72
  color:var(--sys-red-text-light, #ea6658);
@@ -75,7 +75,7 @@
75
75
  color:var(--sys-red-text-main, #621c1b);
76
76
  }
77
77
  .alertButton[data-variant=simple][data-appearance=yellow]{
78
- color:var(--sys-yellow-text-support, #a57b0e);
78
+ color:var(--sys-yellow-text-support, #a77a10);
79
79
  }
80
80
  .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
81
81
  color:var(--sys-yellow-text-light, #ddb035);
@@ -122,7 +122,7 @@
122
122
  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
123
123
  }
124
124
  .alertButton[data-variant=tonal][data-appearance=invert-neutral]{
125
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
125
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
126
126
  }
127
127
  .alertButton[data-variant=tonal][data-appearance=primary]{
128
128
  color:var(--sys-primary-on-accent, #fdfbff);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Alert",
7
- "version": "0.11.4",
7
+ "version": "0.11.5-preview-a882321d.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -33,10 +33,10 @@
33
33
  "scripts": {},
34
34
  "dependencies": {
35
35
  "@snack-uikit/icons": "0.21.0",
36
- "@snack-uikit/link": "0.12.3",
36
+ "@snack-uikit/link": "0.12.4-preview-a882321d.0",
37
37
  "@snack-uikit/truncate-string": "0.4.19",
38
38
  "@snack-uikit/utils": "3.3.0",
39
39
  "classnames": "2.3.2"
40
40
  },
41
- "gitHead": "0c81fa6b2657f51768401ba7ce5015fe8d293805"
41
+ "gitHead": "38c721c17cbfcccf060e438c16a3b70186783780"
42
42
  }
package/src/components/Alert/Alert.tsx CHANGED
@@ -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' | 'external'>;
31
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
32
32
  /** Колбек закрытия */
33
33
  onClose?: () => void;
34
34
  /** Внешний вид */
@@ -87,7 +87,6 @@ export function Alert({
87
87
  {link && (
88
88
  <span>
89
89
  <Link
90
- external
91
90
  {...link}
92
91
  appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
93
92
  textMode='default'
package/src/components/AlertTop/AlertTop.tsx CHANGED
@@ -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' | 'external'>;
32
+ link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
33
33
  /** Кнопка дополнительного действия */
34
34
  action?: AlertButtonProps;
35
35
  /** Колбек закрытия */
@@ -96,7 +96,6 @@ export function AlertTop({
96
96
  {link && (
97
97
  <span>
98
98
  <Link
99
- external
100
99
  {...link}
101
100
  appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
102
101
  textMode='on-accent'