@snack-uikit/link 0.12.4 → 0.13.1-preview-8898cdde.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 +11 -0
- package/README.md +0 -1
- package/dist/components/Link.d.ts +1 -3
- package/dist/components/Link.js +3 -4
- package/dist/components/styles.module.css +48 -48
- package/package.json +3 -4
- package/src/components/Link.tsx +0 -6
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.0 (2024-08-02)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### BREAKING CHANGES
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
* **PDS-349:** link property external deleted ([fe15016](https://github.com/cloud-ru-tech/snack-uikit/commit/fe150162c9a6bdec5d43dabe1e1a8296ddbe0cd4))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 0.12.4 (2024-07-19)
|
|
7
18
|
|
|
8
19
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -36,7 +36,6 @@ import { Link } from '@snack-uikit/link';
|
|
|
36
36
|
| download | `string` | - | HTML-атрибут download |
|
|
37
37
|
| onClick | `MouseEventHandler<HTMLAnchorElement>` | - | Колбек обработки клика |
|
|
38
38
|
| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
|
|
39
|
-
| external | `boolean` | - | Ведет ли ссылка на внешний ресурс (добавляет иконку если true) |
|
|
40
39
|
| appearance | enum Appearance: `"invert-neutral"`, `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Стилизует ссылку для размещения на цветном фоне |
|
|
41
40
|
| textMode | enum TextMode: `"default"`, `"accent"`, `"on-accent"` | default | Тип поверхности, на которой размещена ссылка |
|
|
42
41
|
| insideText | `boolean` | - | Находится ли ссылка внутри текста (и можно ли её переносить) |
|
|
@@ -19,8 +19,6 @@ export type LinkProps = WithSupportProps<{
|
|
|
19
19
|
* @default 's'
|
|
20
20
|
*/
|
|
21
21
|
size?: Size;
|
|
22
|
-
/** Ведет ли ссылка на внешний ресурс (добавляет иконку если true) */
|
|
23
|
-
external?: boolean;
|
|
24
22
|
/** Стилизует ссылку для размещения на цветном фоне
|
|
25
23
|
* @default 'primary'
|
|
26
24
|
*/
|
|
@@ -39,4 +37,4 @@ export type LinkProps = WithSupportProps<{
|
|
|
39
37
|
truncateVariant?: TruncateStringProps['variant'];
|
|
40
38
|
}>;
|
|
41
39
|
/** Компонент ссылка */
|
|
42
|
-
export declare function Link({ text, className, href, target, download, onClick, textMode, size,
|
|
40
|
+
export declare function Link({ text, className, href, target, download, onClick, textMode, size, appearance, insideText, truncateVariant, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/components/Link.js
CHANGED
|
@@ -9,15 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import cn from 'classnames';
|
|
14
|
-
import { ArrowLinksSVG } from '@snack-uikit/icons';
|
|
15
14
|
import { TruncateString } from '@snack-uikit/truncate-string';
|
|
16
15
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
17
16
|
import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
|
|
18
17
|
import styles from './styles.module.css';
|
|
19
18
|
/** Компонент ссылка */
|
|
20
19
|
export function Link(_a) {
|
|
21
|
-
var { text = '', className, href = '#', target = '_blank', download, onClick, textMode = TEXT_MODE.Default, size = SIZE.S,
|
|
22
|
-
return (
|
|
20
|
+
var { text = '', className, href = '#', target = '_blank', download, onClick, textMode = TEXT_MODE.Default, size = SIZE.S, appearance = APPEARANCE.Primary, insideText = false, truncateVariant } = _a, rest = __rest(_a, ["text", "className", "href", "target", "download", "onClick", "textMode", "size", "appearance", "insideText", "truncateVariant"]);
|
|
21
|
+
return (_jsx("a", Object.assign({ className: cn(styles.link, className), href: href, target: target, download: download, onClick: onClick }, extractSupportProps(rest), { "data-size": size, "data-text-mode": textMode, "data-appearance": appearance, "data-inside-text": insideText || undefined, rel: target === '_blank' ? 'noopener noreferrer' : undefined, children: insideText ? text : _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) })));
|
|
23
22
|
}
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
40
40
|
}
|
|
41
41
|
.link[data-appearance=invert-neutral][data-text-mode=on-accent]{
|
|
42
|
-
color:var(--sys-invert-neutral-on-accent, #
|
|
42
|
+
color:var(--sys-invert-neutral-on-accent, #363743);
|
|
43
43
|
}
|
|
44
44
|
.link[data-appearance=invert-neutral][data-text-mode=on-accent]:hover{
|
|
45
|
-
color:var(--sys-invert-neutral-on-accent, #
|
|
45
|
+
color:var(--sys-invert-neutral-on-accent, #363743);
|
|
46
46
|
opacity:var(--opacity-a080, 0.8);
|
|
47
47
|
}
|
|
48
48
|
.link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus-visible{
|
|
49
49
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
50
50
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
51
51
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
52
|
-
color:var(--sys-invert-neutral-on-accent, #
|
|
52
|
+
color:var(--sys-invert-neutral-on-accent, #363743);
|
|
53
53
|
opacity:var(--opacity-a080, 0.8);
|
|
54
54
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
55
55
|
}
|
|
@@ -57,26 +57,26 @@
|
|
|
57
57
|
color:var(--sys-neutral-text-support, #6d707f);
|
|
58
58
|
}
|
|
59
59
|
.link[data-appearance=neutral][data-text-mode=default]:hover{
|
|
60
|
-
color:var(--sys-neutral-text-main, #
|
|
60
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
61
61
|
}
|
|
62
62
|
.link[data-appearance=neutral][data-text-mode=default]:focus-visible{
|
|
63
63
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
64
64
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
65
65
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
66
|
-
color:var(--sys-neutral-text-main, #
|
|
66
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
67
67
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
68
68
|
}
|
|
69
69
|
.link[data-appearance=neutral][data-text-mode=accent]{
|
|
70
70
|
color:var(--sys-neutral-accent-default, #787b8a);
|
|
71
71
|
}
|
|
72
72
|
.link[data-appearance=neutral][data-text-mode=accent]:hover{
|
|
73
|
-
color:var(--sys-neutral-text-main, #
|
|
73
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
74
74
|
}
|
|
75
75
|
.link[data-appearance=neutral][data-text-mode=accent]:focus-visible{
|
|
76
76
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
77
77
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
78
78
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
79
|
-
color:var(--sys-neutral-text-main, #
|
|
79
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
80
80
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
81
81
|
}
|
|
82
82
|
.link[data-appearance=neutral][data-text-mode=on-accent]{
|
|
@@ -136,29 +136,29 @@
|
|
|
136
136
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
137
137
|
}
|
|
138
138
|
.link[data-appearance=red][data-text-mode=default]{
|
|
139
|
-
color:var(--sys-red-text-support, #
|
|
139
|
+
color:var(--sys-red-text-support, #ae514c);
|
|
140
140
|
}
|
|
141
141
|
.link[data-appearance=red][data-text-mode=default]:hover{
|
|
142
|
-
color:var(--sys-red-text-main, #
|
|
142
|
+
color:var(--sys-red-text-main, #7a2d2d);
|
|
143
143
|
}
|
|
144
144
|
.link[data-appearance=red][data-text-mode=default]:focus-visible{
|
|
145
145
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
146
146
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
147
147
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
148
|
-
color:var(--sys-red-text-main, #
|
|
148
|
+
color:var(--sys-red-text-main, #7a2d2d);
|
|
149
149
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
150
150
|
}
|
|
151
151
|
.link[data-appearance=red][data-text-mode=accent]{
|
|
152
|
-
color:var(--sys-red-accent-default, #
|
|
152
|
+
color:var(--sys-red-accent-default, #cb3f3e);
|
|
153
153
|
}
|
|
154
154
|
.link[data-appearance=red][data-text-mode=accent]:hover{
|
|
155
|
-
color:var(--sys-red-text-main, #
|
|
155
|
+
color:var(--sys-red-text-main, #7a2d2d);
|
|
156
156
|
}
|
|
157
157
|
.link[data-appearance=red][data-text-mode=accent]:focus-visible{
|
|
158
158
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
159
159
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
160
160
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
161
|
-
color:var(--sys-red-text-main, #
|
|
161
|
+
color:var(--sys-red-text-main, #7a2d2d);
|
|
162
162
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
163
163
|
}
|
|
164
164
|
.link[data-appearance=red][data-text-mode=on-accent]{
|
|
@@ -177,29 +177,29 @@
|
|
|
177
177
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
178
178
|
}
|
|
179
179
|
.link[data-appearance=orange][data-text-mode=default]{
|
|
180
|
-
color:var(--sys-orange-text-support, #
|
|
180
|
+
color:var(--sys-orange-text-support, #bb733e);
|
|
181
181
|
}
|
|
182
182
|
.link[data-appearance=orange][data-text-mode=default]:hover{
|
|
183
|
-
color:var(--sys-orange-text-main, #
|
|
183
|
+
color:var(--sys-orange-text-main, #884c23);
|
|
184
184
|
}
|
|
185
185
|
.link[data-appearance=orange][data-text-mode=default]:focus-visible{
|
|
186
186
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
187
187
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
188
188
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
189
|
-
color:var(--sys-orange-text-main, #
|
|
189
|
+
color:var(--sys-orange-text-main, #884c23);
|
|
190
190
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
191
191
|
}
|
|
192
192
|
.link[data-appearance=orange][data-text-mode=accent]{
|
|
193
|
-
color:var(--sys-orange-accent-default, #
|
|
193
|
+
color:var(--sys-orange-accent-default, #fb8e42);
|
|
194
194
|
}
|
|
195
195
|
.link[data-appearance=orange][data-text-mode=accent]:hover{
|
|
196
|
-
color:var(--sys-orange-text-main, #
|
|
196
|
+
color:var(--sys-orange-text-main, #884c23);
|
|
197
197
|
}
|
|
198
198
|
.link[data-appearance=orange][data-text-mode=accent]:focus-visible{
|
|
199
199
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
200
200
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
201
201
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
202
|
-
color:var(--sys-orange-text-main, #
|
|
202
|
+
color:var(--sys-orange-text-main, #884c23);
|
|
203
203
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
204
204
|
}
|
|
205
205
|
.link[data-appearance=orange][data-text-mode=on-accent]{
|
|
@@ -218,29 +218,29 @@
|
|
|
218
218
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
219
219
|
}
|
|
220
220
|
.link[data-appearance=blue][data-text-mode=default]{
|
|
221
|
-
color:var(--sys-blue-text-support, #
|
|
221
|
+
color:var(--sys-blue-text-support, #4877b0);
|
|
222
222
|
}
|
|
223
223
|
.link[data-appearance=blue][data-text-mode=default]:hover{
|
|
224
|
-
color:var(--sys-blue-text-main, #
|
|
224
|
+
color:var(--sys-blue-text-main, #2b537e);
|
|
225
225
|
}
|
|
226
226
|
.link[data-appearance=blue][data-text-mode=default]:focus-visible{
|
|
227
227
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
228
228
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
229
229
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
230
|
-
color:var(--sys-blue-text-main, #
|
|
230
|
+
color:var(--sys-blue-text-main, #2b537e);
|
|
231
231
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
232
232
|
}
|
|
233
233
|
.link[data-appearance=blue][data-text-mode=accent]{
|
|
234
234
|
color:var(--sys-blue-accent-default, #5388d1);
|
|
235
235
|
}
|
|
236
236
|
.link[data-appearance=blue][data-text-mode=accent]:hover{
|
|
237
|
-
color:var(--sys-blue-text-main, #
|
|
237
|
+
color:var(--sys-blue-text-main, #2b537e);
|
|
238
238
|
}
|
|
239
239
|
.link[data-appearance=blue][data-text-mode=accent]:focus-visible{
|
|
240
240
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
241
241
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
242
242
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
243
|
-
color:var(--sys-blue-text-main, #
|
|
243
|
+
color:var(--sys-blue-text-main, #2b537e);
|
|
244
244
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
245
245
|
}
|
|
246
246
|
.link[data-appearance=blue][data-text-mode=on-accent]{
|
|
@@ -259,29 +259,29 @@
|
|
|
259
259
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
260
260
|
}
|
|
261
261
|
.link[data-appearance=violet][data-text-mode=default]{
|
|
262
|
-
color:var(--sys-violet-text-support, #
|
|
262
|
+
color:var(--sys-violet-text-support, #906297);
|
|
263
263
|
}
|
|
264
264
|
.link[data-appearance=violet][data-text-mode=default]:hover{
|
|
265
|
-
color:var(--sys-violet-text-main, #
|
|
265
|
+
color:var(--sys-violet-text-main, #5f4264);
|
|
266
266
|
}
|
|
267
267
|
.link[data-appearance=violet][data-text-mode=default]:focus-visible{
|
|
268
268
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
269
269
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
270
270
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
271
|
-
color:var(--sys-violet-text-main, #
|
|
271
|
+
color:var(--sys-violet-text-main, #5f4264);
|
|
272
272
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
273
273
|
}
|
|
274
274
|
.link[data-appearance=violet][data-text-mode=accent]{
|
|
275
275
|
color:var(--sys-violet-accent-default, #b468b5);
|
|
276
276
|
}
|
|
277
277
|
.link[data-appearance=violet][data-text-mode=accent]:hover{
|
|
278
|
-
color:var(--sys-violet-text-main, #
|
|
278
|
+
color:var(--sys-violet-text-main, #5f4264);
|
|
279
279
|
}
|
|
280
280
|
.link[data-appearance=violet][data-text-mode=accent]:focus-visible{
|
|
281
281
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
282
282
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
283
283
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
284
|
-
color:var(--sys-violet-text-main, #
|
|
284
|
+
color:var(--sys-violet-text-main, #5f4264);
|
|
285
285
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
286
286
|
}
|
|
287
287
|
.link[data-appearance=violet][data-text-mode=on-accent]{
|
|
@@ -300,29 +300,29 @@
|
|
|
300
300
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
301
301
|
}
|
|
302
302
|
.link[data-appearance=pink][data-text-mode=default]{
|
|
303
|
-
color:var(--sys-pink-text-support, #
|
|
303
|
+
color:var(--sys-pink-text-support, #ae5e80);
|
|
304
304
|
}
|
|
305
305
|
.link[data-appearance=pink][data-text-mode=default]:hover{
|
|
306
|
-
color:var(--sys-pink-text-main, #
|
|
306
|
+
color:var(--sys-pink-text-main, #754158);
|
|
307
307
|
}
|
|
308
308
|
.link[data-appearance=pink][data-text-mode=default]:focus-visible{
|
|
309
309
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
310
310
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
311
311
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
312
|
-
color:var(--sys-pink-text-main, #
|
|
312
|
+
color:var(--sys-pink-text-main, #754158);
|
|
313
313
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
314
314
|
}
|
|
315
315
|
.link[data-appearance=pink][data-text-mode=accent]{
|
|
316
316
|
color:var(--sys-pink-accent-default, #d1668e);
|
|
317
317
|
}
|
|
318
318
|
.link[data-appearance=pink][data-text-mode=accent]:hover{
|
|
319
|
-
color:var(--sys-pink-text-main, #
|
|
319
|
+
color:var(--sys-pink-text-main, #754158);
|
|
320
320
|
}
|
|
321
321
|
.link[data-appearance=pink][data-text-mode=accent]:focus-visible{
|
|
322
322
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
323
323
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
324
324
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
325
|
-
color:var(--sys-pink-text-main, #
|
|
325
|
+
color:var(--sys-pink-text-main, #754158);
|
|
326
326
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
327
327
|
}
|
|
328
328
|
.link[data-appearance=pink][data-text-mode=on-accent]{
|
|
@@ -341,70 +341,70 @@
|
|
|
341
341
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
342
342
|
}
|
|
343
343
|
.link[data-appearance=yellow][data-text-mode=default]{
|
|
344
|
-
color:var(--sys-yellow-text-support, #
|
|
344
|
+
color:var(--sys-yellow-text-support, #b78c32);
|
|
345
345
|
}
|
|
346
346
|
.link[data-appearance=yellow][data-text-mode=default]:hover{
|
|
347
|
-
color:var(--sys-yellow-text-main, #
|
|
347
|
+
color:var(--sys-yellow-text-main, #815f19);
|
|
348
348
|
}
|
|
349
349
|
.link[data-appearance=yellow][data-text-mode=default]:focus-visible{
|
|
350
350
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
351
351
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
352
352
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
353
|
-
color:var(--sys-yellow-text-main, #
|
|
353
|
+
color:var(--sys-yellow-text-main, #815f19);
|
|
354
354
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
355
355
|
}
|
|
356
356
|
.link[data-appearance=yellow][data-text-mode=accent]{
|
|
357
|
-
color:var(--sys-yellow-accent-default, #
|
|
357
|
+
color:var(--sys-yellow-accent-default, #e2b134);
|
|
358
358
|
}
|
|
359
359
|
.link[data-appearance=yellow][data-text-mode=accent]:hover{
|
|
360
|
-
color:var(--sys-yellow-text-main, #
|
|
360
|
+
color:var(--sys-yellow-text-main, #815f19);
|
|
361
361
|
}
|
|
362
362
|
.link[data-appearance=yellow][data-text-mode=accent]:focus-visible{
|
|
363
363
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
364
364
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
365
365
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
366
|
-
color:var(--sys-yellow-text-main, #
|
|
366
|
+
color:var(--sys-yellow-text-main, #815f19);
|
|
367
367
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
368
368
|
}
|
|
369
369
|
.link[data-appearance=yellow][data-text-mode=on-accent]{
|
|
370
|
-
color:var(--sys-yellow-on-accent, #
|
|
370
|
+
color:var(--sys-yellow-on-accent, #593e20);
|
|
371
371
|
}
|
|
372
372
|
.link[data-appearance=yellow][data-text-mode=on-accent]:hover{
|
|
373
|
-
color:var(--sys-yellow-on-accent, #
|
|
373
|
+
color:var(--sys-yellow-on-accent, #593e20);
|
|
374
374
|
opacity:var(--opacity-a080, 0.8);
|
|
375
375
|
}
|
|
376
376
|
.link[data-appearance=yellow][data-text-mode=on-accent]:focus-visible{
|
|
377
377
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
378
378
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
379
379
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
380
|
-
color:var(--sys-yellow-on-accent, #
|
|
380
|
+
color:var(--sys-yellow-on-accent, #593e20);
|
|
381
381
|
opacity:var(--opacity-a080, 0.8);
|
|
382
382
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
383
383
|
}
|
|
384
384
|
.link[data-appearance=green][data-text-mode=default]{
|
|
385
|
-
color:var(--sys-green-text-support, #
|
|
385
|
+
color:var(--sys-green-text-support, #55915a);
|
|
386
386
|
}
|
|
387
387
|
.link[data-appearance=green][data-text-mode=default]:hover{
|
|
388
|
-
color:var(--sys-green-text-main, #
|
|
388
|
+
color:var(--sys-green-text-main, #3d6035);
|
|
389
389
|
}
|
|
390
390
|
.link[data-appearance=green][data-text-mode=default]:focus-visible{
|
|
391
391
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
392
392
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
393
393
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
394
|
-
color:var(--sys-green-text-main, #
|
|
394
|
+
color:var(--sys-green-text-main, #3d6035);
|
|
395
395
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
396
396
|
}
|
|
397
397
|
.link[data-appearance=green][data-text-mode=accent]{
|
|
398
398
|
color:var(--sys-green-accent-default, #57b762);
|
|
399
399
|
}
|
|
400
400
|
.link[data-appearance=green][data-text-mode=accent]:hover{
|
|
401
|
-
color:var(--sys-green-text-main, #
|
|
401
|
+
color:var(--sys-green-text-main, #3d6035);
|
|
402
402
|
}
|
|
403
403
|
.link[data-appearance=green][data-text-mode=accent]:focus-visible{
|
|
404
404
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
405
405
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
406
406
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
407
|
-
color:var(--sys-green-text-main, #
|
|
407
|
+
color:var(--sys-green-text-main, #3d6035);
|
|
408
408
|
outline-color:var(--sys-available-complementary, #15151b);
|
|
409
409
|
}
|
|
410
410
|
.link[data-appearance=green][data-text-mode=on-accent]{
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Link",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.13.1-preview-8898cdde.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -32,10 +32,9 @@
|
|
|
32
32
|
"license": "Apache-2.0",
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@snack-uikit/
|
|
36
|
-
"@snack-uikit/truncate-string": "0.4.20",
|
|
35
|
+
"@snack-uikit/truncate-string": "0.4.21-preview-8898cdde.0",
|
|
37
36
|
"@snack-uikit/utils": "3.3.0",
|
|
38
37
|
"classnames": "2.3.2"
|
|
39
38
|
},
|
|
40
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "a0351f376ac28462b847d1bf99ad3f7ba7a1d0cd"
|
|
41
40
|
}
|
package/src/components/Link.tsx
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import cn from 'classnames';
|
|
2
2
|
import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
|
|
3
3
|
|
|
4
|
-
import { ArrowLinksSVG } from '@snack-uikit/icons';
|
|
5
4
|
import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
|
|
6
5
|
import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
|
|
7
6
|
|
|
@@ -26,8 +25,6 @@ export type LinkProps = WithSupportProps<{
|
|
|
26
25
|
* @default 's'
|
|
27
26
|
*/
|
|
28
27
|
size?: Size;
|
|
29
|
-
/** Ведет ли ссылка на внешний ресурс (добавляет иконку если true) */
|
|
30
|
-
external?: boolean;
|
|
31
28
|
/** Стилизует ссылку для размещения на цветном фоне
|
|
32
29
|
* @default 'primary'
|
|
33
30
|
*/
|
|
@@ -56,7 +53,6 @@ export function Link({
|
|
|
56
53
|
onClick,
|
|
57
54
|
textMode = TEXT_MODE.Default,
|
|
58
55
|
size = SIZE.S,
|
|
59
|
-
external,
|
|
60
56
|
appearance = APPEARANCE.Primary,
|
|
61
57
|
insideText = false,
|
|
62
58
|
truncateVariant,
|
|
@@ -77,8 +73,6 @@ export function Link({
|
|
|
77
73
|
rel={target === '_blank' ? 'noopener noreferrer' : undefined}
|
|
78
74
|
>
|
|
79
75
|
{insideText ? text : <TruncateString text={text} maxLines={1} variant={truncateVariant} />}
|
|
80
|
-
|
|
81
|
-
{external && <ArrowLinksSVG data-test-id='link__external-icon' className={styles.icon} />}
|
|
82
76
|
</a>
|
|
83
77
|
);
|
|
84
78
|
}
|