@snack-uikit/alert 0.13.1-preview-8898cdde.0 → 0.13.1

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 (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/Alert/Alert.js +2 -2
  3. package/dist/components/Alert/styles.module.css +7 -7
  4. package/dist/components/AlertTop/styles.module.css +6 -6
  5. package/dist/constants.d.ts +1 -0
  6. package/dist/constants.js +8 -0
  7. package/dist/helperComponents/styles.module.css +15 -15
  8. package/package.json +4 -4
  9. package/src/components/Alert/Alert.tsx +2 -2
  10. package/src/constants.ts +9 -0
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.13.1 (2024-08-05)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-0000:** link color for neutral appearance ([d264fc8](https://github.com/cloud-ru-tech/snack-uikit/commit/d264fc8c79772e0b4af2506dd6510f95c9b2093a))
12
+
13
+
14
+
15
+
16
+
6
17
  # 0.13.0 (2024-08-02)
7
18
 
8
19
 
package/dist/components/Alert/Alert.js CHANGED
@@ -15,7 +15,7 @@ import { CrossSVG } from '@snack-uikit/icons';
15
15
  import { Link } from '@snack-uikit/link';
16
16
  import { TruncateString } from '@snack-uikit/truncate-string';
17
17
  import { extractSupportProps } from '@snack-uikit/utils';
18
- import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
18
+ import { APPEARANCE, APPEARANCE_TO_COLOR_MAP, APPEARANCE_TO_LINK_COLOR_MAP } from '../../constants';
19
19
  import { AlertButton } from '../../helperComponents';
20
20
  import { getIcon } from '../../utils';
21
21
  import styles from './styles.module.css';
@@ -27,5 +27,5 @@ export function Alert(_a) {
27
27
  var { icon = true, title, truncate, link, description, onClose, appearance = APPEARANCE.Neutral, className, actions, outline, size = 'm' } = _a, rest = __rest(_a, ["icon", "title", "truncate", "link", "description", "onClose", "appearance", "className", "actions", "outline", "size"]);
28
28
  return (_jsxs("div", Object.assign({ className: cn(styles.alert, {
29
29
  [styles.alertOutline]: outline,
30
- }, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-size": size, children: [_jsxs("div", { className: styles.body, "data-size": size, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', "data-size": size, children: getIcon(appearance, size === 's' ? 16 : 24) })), _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', "data-size": size })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, "data-size": size, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({}, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'default', size: size, "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, "data-size": size, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size })))] }))] })));
30
+ }, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-size": size, children: [_jsxs("div", { className: styles.body, "data-size": size, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', "data-size": size, children: getIcon(appearance, size === 's' ? 16 : 24) })), _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', "data-size": size })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, "data-size": size, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({}, link, { appearance: APPEARANCE_TO_LINK_COLOR_MAP[appearance], textMode: 'default', size: size, "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, "data-size": size, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size })))] }))] })));
31
31
  }
package/dist/components/Alert/styles.module.css CHANGED
@@ -11,16 +11,16 @@
11
11
  background-color:var(--sys-primary-background, #f6effe);
12
12
  }
13
13
  .alert[data-color=red]{
14
- background-color:var(--sys-red-background, #fdf1ef);
14
+ background-color:var(--sys-red-background, #fdedea);
15
15
  }
16
16
  .alert[data-color=yellow]{
17
- background-color:var(--sys-yellow-background, #fef7e1);
17
+ background-color:var(--sys-yellow-background, #fcf4da);
18
18
  }
19
19
  .alert[data-color=green]{
20
- background-color:var(--sys-green-background, #f1fbee);
20
+ background-color:var(--sys-green-background, #ecf6ea);
21
21
  }
22
22
  .alert[data-color=blue]{
23
- background-color:var(--sys-blue-background, #eef8ff);
23
+ background-color:var(--sys-blue-background, #edf4fd);
24
24
  }
25
25
  .alert[data-size=s]{
26
26
  padding-top:var(--space-alert-s-container-vertical-padding, 7px);
@@ -101,10 +101,10 @@
101
101
  color:var(--sys-primary-accent-default, #794ed3);
102
102
  }
103
103
  .icon[data-color=red]{
104
- color:var(--sys-red-accent-default, #cb3f3e);
104
+ color:var(--sys-red-accent-default, #cd3c3c);
105
105
  }
106
106
  .icon[data-color=yellow]{
107
- color:var(--sys-yellow-accent-default, #e2b134);
107
+ color:var(--sys-yellow-accent-default, #ffc443);
108
108
  }
109
109
  .icon[data-color=green]{
110
110
  color:var(--sys-green-accent-default, #57b762);
@@ -143,7 +143,7 @@
143
143
  }
144
144
 
145
145
  .title{
146
- color:var(--sys-neutral-text-main, #41424e);
146
+ color:var(--sys-neutral-text-main, #33343f);
147
147
  }
148
148
  .title[data-size=s]{
149
149
  font-family:var(--sans-title-s-font-family, SB Sans Interface);
package/dist/components/AlertTop/styles.module.css CHANGED
@@ -9,16 +9,16 @@
9
9
  box-sizing:border-box;
10
10
  }
11
11
  .alertTop[data-color=invert-neutral]{
12
- background-color:var(--sys-invert-neutral-background, #2a2a35);
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);
16
16
  }
17
17
  .alertTop[data-color=red]{
18
- background-color:var(--sys-red-accent-default, #cb3f3e);
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, #e2b134);
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);
@@ -42,7 +42,7 @@
42
42
  color:var(--sys-red-on-accent, #fffbf9);
43
43
  }
44
44
  .icon[data-color=yellow]{
45
- color:var(--sys-yellow-on-accent, #593e20);
45
+ color:var(--sys-yellow-on-accent, #5e3d06);
46
46
  }
47
47
  .icon[data-color=green]{
48
48
  color:var(--sys-green-on-accent, #fcfefa);
@@ -73,7 +73,7 @@
73
73
  color:var(--sys-red-on-accent, #fffbf9);
74
74
  }
75
75
  .title[data-color=yellow]{
76
- color:var(--sys-yellow-on-accent, #593e20);
76
+ color:var(--sys-yellow-on-accent, #5e3d06);
77
77
  }
78
78
  .title[data-color=green]{
79
79
  color:var(--sys-green-on-accent, #fcfefa);
@@ -101,7 +101,7 @@
101
101
  color:var(--sys-red-on-accent, #fffbf9);
102
102
  }
103
103
  .description[data-color=yellow]{
104
- color:var(--sys-yellow-on-accent, #593e20);
104
+ color:var(--sys-yellow-on-accent, #5e3d06);
105
105
  }
106
106
  .description[data-color=green]{
107
107
  color:var(--sys-green-on-accent, #fcfefa);
package/dist/constants.d.ts CHANGED
@@ -13,3 +13,4 @@ export declare const SIZE: {
13
13
  readonly M: "m";
14
14
  };
15
15
  export declare const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']>;
16
+ export declare const APPEARANCE_TO_LINK_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']>;
package/dist/constants.js CHANGED
@@ -18,3 +18,11 @@ export const APPEARANCE_TO_COLOR_MAP = {
18
18
  [APPEARANCE.Success]: 'green',
19
19
  [APPEARANCE.Info]: 'blue',
20
20
  };
21
+ export const APPEARANCE_TO_LINK_COLOR_MAP = {
22
+ [APPEARANCE.Neutral]: 'primary',
23
+ [APPEARANCE.Primary]: 'primary',
24
+ [APPEARANCE.Error]: 'red',
25
+ [APPEARANCE.Warning]: 'yellow',
26
+ [APPEARANCE.Success]: 'green',
27
+ [APPEARANCE.Info]: 'blue',
28
+ };
package/dist/helperComponents/styles.module.css CHANGED
@@ -72,10 +72,10 @@
72
72
  color:var(--sys-neutral-text-support, #6d707f);
73
73
  }
74
74
  .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
75
- color:var(--sys-neutral-text-main, #41424e);
75
+ color:var(--sys-neutral-text-main, #33343f);
76
76
  }
77
77
  .alertButton[data-variant=simple][data-appearance=neutral]:active{
78
- color:var(--sys-neutral-text-main, #41424e);
78
+ color:var(--sys-neutral-text-main, #33343f);
79
79
  }
80
80
  .alertButton[data-variant=simple][data-appearance=primary]{
81
81
  color:var(--sys-primary-text-support, #5b4796);
@@ -87,40 +87,40 @@
87
87
  color:var(--sys-primary-text-main, #382a62);
88
88
  }
89
89
  .alertButton[data-variant=simple][data-appearance=red]{
90
- color:var(--sys-red-text-support, #ae514c);
90
+ color:var(--sys-red-text-support, #a63d3a);
91
91
  }
92
92
  .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
93
- color:var(--sys-red-text-main, #7a2d2d);
93
+ color:var(--sys-red-text-main, #621c1b);
94
94
  }
95
95
  .alertButton[data-variant=simple][data-appearance=red]:active{
96
- color:var(--sys-red-text-main, #7a2d2d);
96
+ color:var(--sys-red-text-main, #621c1b);
97
97
  }
98
98
  .alertButton[data-variant=simple][data-appearance=yellow]{
99
- color:var(--sys-yellow-text-support, #b78c32);
99
+ color:var(--sys-yellow-text-support, #a77a10);
100
100
  }
101
101
  .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
102
- color:var(--sys-yellow-text-main, #815f19);
102
+ color:var(--sys-yellow-text-main, #5e3d06);
103
103
  }
104
104
  .alertButton[data-variant=simple][data-appearance=yellow]:active{
105
- color:var(--sys-yellow-text-main, #815f19);
105
+ color:var(--sys-yellow-text-main, #5e3d06);
106
106
  }
107
107
  .alertButton[data-variant=simple][data-appearance=green]{
108
- color:var(--sys-green-text-support, #55915a);
108
+ color:var(--sys-green-text-support, #568a56);
109
109
  }
110
110
  .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
111
- color:var(--sys-green-text-main, #3d6035);
111
+ color:var(--sys-green-text-main, #323f27);
112
112
  }
113
113
  .alertButton[data-variant=simple][data-appearance=green]:active{
114
- color:var(--sys-green-text-main, #3d6035);
114
+ color:var(--sys-green-text-main, #323f27);
115
115
  }
116
116
  .alertButton[data-variant=simple][data-appearance=blue]{
117
- color:var(--sys-blue-text-support, #4877b0);
117
+ color:var(--sys-blue-text-support, #4975a9);
118
118
  }
119
119
  .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
120
- color:var(--sys-blue-text-main, #2b537e);
120
+ color:var(--sys-blue-text-main, #153a61);
121
121
  }
122
122
  .alertButton[data-variant=simple][data-appearance=blue]:active{
123
- color:var(--sys-blue-text-main, #2b537e);
123
+ color:var(--sys-blue-text-main, #153a61);
124
124
  }
125
125
 
126
126
  .alertButton[data-variant=tonal]{
@@ -161,7 +161,7 @@
161
161
  color:var(--sys-red-on-accent, #fffbf9);
162
162
  }
163
163
  .alertButton[data-variant=tonal][data-appearance=yellow]{
164
- color:var(--sys-yellow-on-accent, #593e20);
164
+ color:var(--sys-yellow-on-accent, #5e3d06);
165
165
  }
166
166
  .alertButton[data-variant=tonal][data-appearance=green]{
167
167
  color:var(--sys-green-on-accent, #fcfefa);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Alert",
7
- "version": "0.13.1-preview-8898cdde.0",
7
+ "version": "0.13.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -33,11 +33,11 @@
33
33
  "scripts": {},
34
34
  "dependencies": {
35
35
  "@snack-uikit/icons": "0.22.0",
36
- "@snack-uikit/link": "0.13.1-preview-8898cdde.0",
36
+ "@snack-uikit/link": "0.13.0",
37
37
  "@snack-uikit/loaders": "0.5.2",
38
- "@snack-uikit/truncate-string": "0.4.21-preview-8898cdde.0",
38
+ "@snack-uikit/truncate-string": "0.4.20",
39
39
  "@snack-uikit/utils": "3.3.0",
40
40
  "classnames": "2.3.2"
41
41
  },
42
- "gitHead": "a0351f376ac28462b847d1bf99ad3f7ba7a1d0cd"
42
+ "gitHead": "d401b1e5dc282f4f8bea2fda98e62790ae722ba5"
43
43
  }
package/src/components/Alert/Alert.tsx CHANGED
@@ -6,7 +6,7 @@ import { Link, LinkProps } from '@snack-uikit/link';
6
6
  import { TruncateString } from '@snack-uikit/truncate-string';
7
7
  import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
8
8
 
9
- import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
9
+ import { APPEARANCE, APPEARANCE_TO_COLOR_MAP, APPEARANCE_TO_LINK_COLOR_MAP } from '../../constants';
10
10
  import { AlertButton, AlertButtonProps } from '../../helperComponents';
11
11
  import { Appearance, Size } from '../../types';
12
12
  import { getIcon } from '../../utils';
@@ -107,7 +107,7 @@ export function Alert({
107
107
  <span>
108
108
  <Link
109
109
  {...link}
110
- appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
110
+ appearance={APPEARANCE_TO_LINK_COLOR_MAP[appearance]}
111
111
  textMode='default'
112
112
  size={size}
113
113
  data-test-id='alert__link'
package/src/constants.ts CHANGED
@@ -23,3 +23,12 @@ export const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkPro
23
23
  [APPEARANCE.Success]: 'green',
24
24
  [APPEARANCE.Info]: 'blue',
25
25
  } as const;
26
+
27
+ export const APPEARANCE_TO_LINK_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']> = {
28
+ [APPEARANCE.Neutral]: 'primary',
29
+ [APPEARANCE.Primary]: 'primary',
30
+ [APPEARANCE.Error]: 'red',
31
+ [APPEARANCE.Warning]: 'yellow',
32
+ [APPEARANCE.Success]: 'green',
33
+ [APPEARANCE.Info]: 'blue',
34
+ } as const;