@snack-uikit/link 0.12.3 → 0.12.4-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 (6) hide show
  1. package/README.md +0 -1
  2. package/dist/components/Link.d.ts +1 -3
  3. package/dist/components/Link.js +3 -4
  4. package/dist/components/styles.module.css +36 -36
  5. package/package.json +2 -3
  6. package/src/components/Link.tsx +0 -6
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` | - | Находится ли ссылка внутри текста (и можно ли её переносить) |
package/dist/components/Link.d.ts CHANGED
@@ -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, external, appearance, insideText, truncateVariant, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
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, jsxs as _jsxs } from "react/jsx-runtime";
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, external, appearance = APPEARANCE.Primary, insideText = false, truncateVariant } = _a, rest = __rest(_a, ["text", "className", "href", "target", "download", "onClick", "textMode", "size", "external", "appearance", "insideText", "truncateVariant"]);
22
- return (_jsxs("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 }), external && _jsx(ArrowLinksSVG, { "data-test-id": 'link__external-icon', className: styles.icon })] })));
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
  }
package/dist/components/styles.module.css CHANGED
@@ -13,71 +13,71 @@
13
13
  display:inline;
14
14
  }
15
15
  .link[data-appearance=invert-neutral][data-text-mode=default]{
16
- color:var(--sys-invert-neutral-text-support, #bfc2cc);
16
+ color:var(--sys-invert-neutral-text-support, #bec2cf);
17
17
  }
18
18
  .link[data-appearance=invert-neutral][data-text-mode=default]:hover{
19
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
19
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
20
20
  }
21
21
  .link[data-appearance=invert-neutral][data-text-mode=default]:focus-visible{
22
22
  outline-width:var(--border-state-focus-s-border-width, 2px);
23
23
  outline-style:var(--border-state-focus-s-border-style, solid);
24
24
  outline-color:var(--border-state-focus-s-border-color, );
25
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
26
- outline-color:var(--sys-available-complementary, #141415);
25
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
26
+ outline-color:var(--sys-available-complementary, #15151b);
27
27
  }
28
28
  .link[data-appearance=invert-neutral][data-text-mode=accent]{
29
29
  color:var(--sys-invert-neutral-accent-default, #cfd2dc);
30
30
  }
31
31
  .link[data-appearance=invert-neutral][data-text-mode=accent]:hover{
32
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
32
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
33
33
  }
34
34
  .link[data-appearance=invert-neutral][data-text-mode=accent]:focus-visible{
35
35
  outline-width:var(--border-state-focus-s-border-width, 2px);
36
36
  outline-style:var(--border-state-focus-s-border-style, solid);
37
37
  outline-color:var(--border-state-focus-s-border-color, );
38
- color:var(--sys-invert-neutral-text-main, #e8eaf1);
38
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
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, #27272e);
42
+ color:var(--sys-invert-neutral-on-accent, #2d2e38);
43
43
  }
44
44
  .link[data-appearance=invert-neutral][data-text-mode=on-accent]:hover{
45
- color:var(--sys-invert-neutral-on-accent, #27272e);
45
+ color:var(--sys-invert-neutral-on-accent, #2d2e38);
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, #27272e);
52
+ color:var(--sys-invert-neutral-on-accent, #2d2e38);
53
53
  opacity:var(--opacity-a080, 0.8);
54
54
  outline-color:var(--sys-available-on-complementary, #ffffff);
55
55
  }
56
56
  .link[data-appearance=neutral][data-text-mode=default]{
57
- color:var(--sys-neutral-text-support, #656771);
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, #33333b);
60
+ color:var(--sys-neutral-text-main, #33343f);
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, #33333b);
67
- outline-color:var(--sys-available-complementary, #141415);
66
+ color:var(--sys-neutral-text-main, #33343f);
67
+ outline-color:var(--sys-available-complementary, #15151b);
68
68
  }
69
69
  .link[data-appearance=neutral][data-text-mode=accent]{
70
- color:var(--sys-neutral-accent-default, #6f717c);
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, #33333b);
73
+ color:var(--sys-neutral-text-main, #33343f);
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, #33333b);
80
- outline-color:var(--sys-available-complementary, #141415);
79
+ color:var(--sys-neutral-text-main, #33343f);
80
+ outline-color:var(--sys-available-complementary, #15151b);
81
81
  }
82
82
  .link[data-appearance=neutral][data-text-mode=on-accent]{
83
83
  color:var(--sys-neutral-on-accent, #ffffff);
@@ -105,7 +105,7 @@
105
105
  outline-style:var(--border-state-focus-s-border-style, solid);
106
106
  outline-color:var(--border-state-focus-s-border-color, );
107
107
  color:var(--sys-primary-text-main, #382a62);
108
- outline-color:var(--sys-available-complementary, #141415);
108
+ outline-color:var(--sys-available-complementary, #15151b);
109
109
  }
110
110
  .link[data-appearance=primary][data-text-mode=accent]{
111
111
  color:var(--sys-primary-accent-default, #794ed3);
@@ -118,7 +118,7 @@
118
118
  outline-style:var(--border-state-focus-s-border-style, solid);
119
119
  outline-color:var(--border-state-focus-s-border-color, );
120
120
  color:var(--sys-primary-text-main, #382a62);
121
- outline-color:var(--sys-available-complementary, #141415);
121
+ outline-color:var(--sys-available-complementary, #15151b);
122
122
  }
123
123
  .link[data-appearance=primary][data-text-mode=on-accent]{
124
124
  color:var(--sys-primary-on-accent, #fdfbff);
@@ -136,7 +136,7 @@
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, #ab423e);
139
+ color:var(--sys-red-text-support, #a63d3a);
140
140
  }
141
141
  .link[data-appearance=red][data-text-mode=default]:hover{
142
142
  color:var(--sys-red-text-main, #621c1b);
@@ -146,7 +146,7 @@
146
146
  outline-style:var(--border-state-focus-s-border-style, solid);
147
147
  outline-color:var(--border-state-focus-s-border-color, );
148
148
  color:var(--sys-red-text-main, #621c1b);
149
- outline-color:var(--sys-available-complementary, #141415);
149
+ outline-color:var(--sys-available-complementary, #15151b);
150
150
  }
151
151
  .link[data-appearance=red][data-text-mode=accent]{
152
152
  color:var(--sys-red-accent-default, #cd3c3c);
@@ -159,7 +159,7 @@
159
159
  outline-style:var(--border-state-focus-s-border-style, solid);
160
160
  outline-color:var(--border-state-focus-s-border-color, );
161
161
  color:var(--sys-red-text-main, #621c1b);
162
- outline-color:var(--sys-available-complementary, #141415);
162
+ outline-color:var(--sys-available-complementary, #15151b);
163
163
  }
164
164
  .link[data-appearance=red][data-text-mode=on-accent]{
165
165
  color:var(--sys-red-on-accent, #fffbf9);
@@ -187,7 +187,7 @@
187
187
  outline-style:var(--border-state-focus-s-border-style, solid);
188
188
  outline-color:var(--border-state-focus-s-border-color, );
189
189
  color:var(--sys-orange-text-main, #643117);
190
- outline-color:var(--sys-available-complementary, #141415);
190
+ outline-color:var(--sys-available-complementary, #15151b);
191
191
  }
192
192
  .link[data-appearance=orange][data-text-mode=accent]{
193
193
  color:var(--sys-orange-accent-default, #ff8b37);
@@ -200,7 +200,7 @@
200
200
  outline-style:var(--border-state-focus-s-border-style, solid);
201
201
  outline-color:var(--border-state-focus-s-border-color, );
202
202
  color:var(--sys-orange-text-main, #643117);
203
- outline-color:var(--sys-available-complementary, #141415);
203
+ outline-color:var(--sys-available-complementary, #15151b);
204
204
  }
205
205
  .link[data-appearance=orange][data-text-mode=on-accent]{
206
206
  color:var(--sys-orange-on-accent, #fffcf4);
@@ -228,7 +228,7 @@
228
228
  outline-style:var(--border-state-focus-s-border-style, solid);
229
229
  outline-color:var(--border-state-focus-s-border-color, );
230
230
  color:var(--sys-blue-text-main, #153a61);
231
- outline-color:var(--sys-available-complementary, #141415);
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);
@@ -241,7 +241,7 @@
241
241
  outline-style:var(--border-state-focus-s-border-style, solid);
242
242
  outline-color:var(--border-state-focus-s-border-color, );
243
243
  color:var(--sys-blue-text-main, #153a61);
244
- outline-color:var(--sys-available-complementary, #141415);
244
+ outline-color:var(--sys-available-complementary, #15151b);
245
245
  }
246
246
  .link[data-appearance=blue][data-text-mode=on-accent]{
247
247
  color:var(--sys-blue-on-accent, #fdfeff);
@@ -269,7 +269,7 @@
269
269
  outline-style:var(--border-state-focus-s-border-style, solid);
270
270
  outline-color:var(--border-state-focus-s-border-color, );
271
271
  color:var(--sys-violet-text-main, #502e56);
272
- outline-color:var(--sys-available-complementary, #141415);
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);
@@ -282,7 +282,7 @@
282
282
  outline-style:var(--border-state-focus-s-border-style, solid);
283
283
  outline-color:var(--border-state-focus-s-border-color, );
284
284
  color:var(--sys-violet-text-main, #502e56);
285
- outline-color:var(--sys-available-complementary, #141415);
285
+ outline-color:var(--sys-available-complementary, #15151b);
286
286
  }
287
287
  .link[data-appearance=violet][data-text-mode=on-accent]{
288
288
  color:var(--sys-violet-on-accent, #fdfdfd);
@@ -310,7 +310,7 @@
310
310
  outline-style:var(--border-state-focus-s-border-style, solid);
311
311
  outline-color:var(--border-state-focus-s-border-color, );
312
312
  color:var(--sys-pink-text-main, #5e2540);
313
- outline-color:var(--sys-available-complementary, #141415);
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);
@@ -323,7 +323,7 @@
323
323
  outline-style:var(--border-state-focus-s-border-style, solid);
324
324
  outline-color:var(--border-state-focus-s-border-color, );
325
325
  color:var(--sys-pink-text-main, #5e2540);
326
- outline-color:var(--sys-available-complementary, #141415);
326
+ outline-color:var(--sys-available-complementary, #15151b);
327
327
  }
328
328
  .link[data-appearance=pink][data-text-mode=on-accent]{
329
329
  color:var(--sys-pink-on-accent, #fdfcfd);
@@ -341,7 +341,7 @@
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, #a57b0e);
344
+ color:var(--sys-yellow-text-support, #a77a10);
345
345
  }
346
346
  .link[data-appearance=yellow][data-text-mode=default]:hover{
347
347
  color:var(--sys-yellow-text-main, #5e3d06);
@@ -351,10 +351,10 @@
351
351
  outline-style:var(--border-state-focus-s-border-style, solid);
352
352
  outline-color:var(--border-state-focus-s-border-color, );
353
353
  color:var(--sys-yellow-text-main, #5e3d06);
354
- outline-color:var(--sys-available-complementary, #141415);
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, #fdca46);
357
+ color:var(--sys-yellow-accent-default, #ffc443);
358
358
  }
359
359
  .link[data-appearance=yellow][data-text-mode=accent]:hover{
360
360
  color:var(--sys-yellow-text-main, #5e3d06);
@@ -364,7 +364,7 @@
364
364
  outline-style:var(--border-state-focus-s-border-style, solid);
365
365
  outline-color:var(--border-state-focus-s-border-color, );
366
366
  color:var(--sys-yellow-text-main, #5e3d06);
367
- outline-color:var(--sys-available-complementary, #141415);
367
+ outline-color:var(--sys-available-complementary, #15151b);
368
368
  }
369
369
  .link[data-appearance=yellow][data-text-mode=on-accent]{
370
370
  color:var(--sys-yellow-on-accent, #5e3d06);
@@ -392,7 +392,7 @@
392
392
  outline-style:var(--border-state-focus-s-border-style, solid);
393
393
  outline-color:var(--border-state-focus-s-border-color, );
394
394
  color:var(--sys-green-text-main, #323f27);
395
- outline-color:var(--sys-available-complementary, #141415);
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);
@@ -405,7 +405,7 @@
405
405
  outline-style:var(--border-state-focus-s-border-style, solid);
406
406
  outline-color:var(--border-state-focus-s-border-color, );
407
407
  color:var(--sys-green-text-main, #323f27);
408
- outline-color:var(--sys-available-complementary, #141415);
408
+ outline-color:var(--sys-available-complementary, #15151b);
409
409
  }
410
410
  .link[data-appearance=green][data-text-mode=on-accent]{
411
411
  color:var(--sys-green-on-accent, #fcfefa);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Link",
7
- "version": "0.12.3",
7
+ "version": "0.12.4-preview-a882321d.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/icons": "0.21.0",
36
35
  "@snack-uikit/truncate-string": "0.4.19",
37
36
  "@snack-uikit/utils": "3.3.0",
38
37
  "classnames": "2.3.2"
39
38
  },
40
- "gitHead": "0c81fa6b2657f51768401ba7ce5015fe8d293805"
39
+ "gitHead": "38c721c17cbfcccf060e438c16a3b70186783780"
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
  }