@snack-uikit/link 0.16.5 → 0.16.6-preview-ccf49ef5.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 (18) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/components/Link.d.ts +1 -1
  3. package/dist/cjs/components/Link.js +3 -1
  4. package/dist/cjs/components/constants.d.ts +7 -0
  5. package/dist/cjs/components/constants.js +8 -1
  6. package/dist/cjs/components/styles.module.css +351 -12
  7. package/dist/cjs/components/types.d.ts +6 -1
  8. package/dist/esm/components/Link.d.ts +1 -1
  9. package/dist/esm/components/Link.js +3 -3
  10. package/dist/esm/components/constants.d.ts +7 -0
  11. package/dist/esm/components/constants.js +7 -0
  12. package/dist/esm/components/styles.module.css +351 -12
  13. package/dist/esm/components/types.d.ts +6 -1
  14. package/package.json +2 -2
  15. package/src/components/Link.tsx +3 -1
  16. package/src/components/constants.ts +8 -0
  17. package/src/components/styles.module.scss +13 -6
  18. package/src/components/types.ts +7 -1
package/README.md CHANGED
@@ -38,6 +38,7 @@ import { Link as ReactRouterLink } from 'react-router-dom';
38
38
  |------|------|---------------|-------------|
39
39
  | text | `string` | - | Текст ссылки |
40
40
  | size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
41
+ | purpose | enum Purpose: `"display"`, `"headline"`, `"title"`, `"label"`, `"body"` | body | Роль |
41
42
  | appearance | enum Appearance: `"invert-neutral"`, `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Стилизует ссылку для размещения на цветном фоне |
42
43
  | textMode | enum TextMode: `"default"`, `"accent"`, `"on-accent"` | default | Тип поверхности, на которой размещена ссылка |
43
44
  | insideText | `boolean` | - | Находится ли ссылка внутри текста (и можно ли её переносить) |
package/dist/cjs/components/Link.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ElementType } from 'react';
2
2
  import { LinkProps } from './types';
3
3
  /** Компонент ссылка */
4
- export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
4
+ export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/components/Link.js CHANGED
@@ -31,12 +31,13 @@ function Link(_a) {
31
31
  className,
32
32
  textMode = constants_1.TEXT_MODE.Default,
33
33
  size = constants_1.SIZE.S,
34
+ purpose = constants_1.PURPOSE.Body,
34
35
  appearance = constants_1.APPEARANCE.Primary,
35
36
  insideText = false,
36
37
  truncateVariant,
37
38
  as
38
39
  } = _a,
39
- rest = __rest(_a, ["text", "className", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
40
+ rest = __rest(_a, ["text", "className", "textMode", "size", "purpose", "appearance", "insideText", "truncateVariant", "as"]);
40
41
  const Component = as || 'a';
41
42
  let fallbackProps;
42
43
  if (Component === 'a') {
@@ -57,6 +58,7 @@ function Link(_a) {
57
58
  className: (0, classnames_1.default)(styles_module_scss_1.default.link, className)
58
59
  }, fallbackProps, {
59
60
  "data-size": size,
61
+ "data-purpose": purpose,
60
62
  "data-text-mode": textMode,
61
63
  "data-appearance": appearance,
62
64
  "data-inside-text": insideText || undefined,
package/dist/cjs/components/constants.d.ts CHANGED
@@ -15,6 +15,13 @@ export declare const SIZE: {
15
15
  readonly M: "m";
16
16
  readonly L: "l";
17
17
  };
18
+ export declare const PURPOSE: {
19
+ readonly Display: "display";
20
+ readonly Headline: "headline";
21
+ readonly Title: "title";
22
+ readonly Label: "label";
23
+ readonly Body: "body";
24
+ };
18
25
  export declare const TARGET: {
19
26
  readonly Self: "_self";
20
27
  readonly Blank: "_blank";
package/dist/cjs/components/constants.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TEXT_MODE = exports.TARGET = exports.SIZE = exports.APPEARANCE = void 0;
6
+ exports.TEXT_MODE = exports.TARGET = exports.PURPOSE = exports.SIZE = exports.APPEARANCE = void 0;
7
7
  exports.APPEARANCE = {
8
8
  InvertNeutral: 'invert-neutral',
9
9
  Neutral: 'neutral',
@@ -21,6 +21,13 @@ exports.SIZE = {
21
21
  M: 'm',
22
22
  L: 'l'
23
23
  };
24
+ exports.PURPOSE = {
25
+ Display: 'display',
26
+ Headline: 'headline',
27
+ Title: 'title',
28
+ Label: 'label',
29
+ Body: 'body'
30
+ };
24
31
  exports.TARGET = {
25
32
  Self: '_self',
26
33
  Blank: '_blank',
package/dist/cjs/components/styles.module.css CHANGED
@@ -425,8 +425,121 @@
425
425
  .link[data-size=s]{
426
426
  height:var(--size-link-s, 16px);
427
427
  gap:var(--space-link-gap-single, 0px);
428
- }
429
- .link[data-size=s][data-text-mode=default]{
428
+ height:auto;
429
+ }
430
+ .link[data-size=s][data-purpose=display][data-text-mode=default]{
431
+ font-family:var(--sans-display-s-font-family, SB Sans Interface);
432
+ font-weight:var(--sans-display-s-font-weight, Semibold);
433
+ line-height:var(--sans-display-s-line-height, 48px);
434
+ font-size:var(--sans-display-s-font-size, 40px);
435
+ letter-spacing:var(--sans-display-s-letter-spacing, -0.5px);
436
+ paragraph-spacing:var(--sans-display-s-paragraph-spacing, 22px);
437
+ }
438
+ .link[data-size=s][data-purpose=display][data-text-mode=accent]{
439
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
440
+ font-weight:var(--link-display-s-font-weight, Semibold);
441
+ line-height:var(--link-display-s-line-height, 48px);
442
+ font-size:var(--link-display-s-font-size, 40px);
443
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
444
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
445
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
446
+ text-decoration:var(--link-display-s-text-decoration, underline);
447
+ }
448
+ .link[data-size=s][data-purpose=display][data-text-mode=on-accent]{
449
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
450
+ font-weight:var(--link-display-s-font-weight, Semibold);
451
+ line-height:var(--link-display-s-line-height, 48px);
452
+ font-size:var(--link-display-s-font-size, 40px);
453
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
454
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
455
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
456
+ text-decoration:var(--link-display-s-text-decoration, underline);
457
+ }
458
+ .link[data-size=s][data-purpose=headline][data-text-mode=default]{
459
+ font-family:var(--sans-headline-s-font-family, SB Sans Interface);
460
+ font-weight:var(--sans-headline-s-font-weight, Semibold);
461
+ line-height:var(--sans-headline-s-line-height, 32px);
462
+ font-size:var(--sans-headline-s-font-size, 24px);
463
+ letter-spacing:var(--sans-headline-s-letter-spacing, -0.5px);
464
+ paragraph-spacing:var(--sans-headline-s-paragraph-spacing, 13.2px);
465
+ }
466
+ .link[data-size=s][data-purpose=headline][data-text-mode=accent]{
467
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
468
+ font-weight:var(--link-headline-s-font-weight, Semibold);
469
+ line-height:var(--link-headline-s-line-height, 32px);
470
+ font-size:var(--link-headline-s-font-size, 24px);
471
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
472
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
473
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
474
+ text-decoration:var(--link-headline-s-text-decoration, underline);
475
+ }
476
+ .link[data-size=s][data-purpose=headline][data-text-mode=on-accent]{
477
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
478
+ font-weight:var(--link-headline-s-font-weight, Semibold);
479
+ line-height:var(--link-headline-s-line-height, 32px);
480
+ font-size:var(--link-headline-s-font-size, 24px);
481
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
482
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
483
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
484
+ text-decoration:var(--link-headline-s-text-decoration, underline);
485
+ }
486
+ .link[data-size=s][data-purpose=title][data-text-mode=default]{
487
+ font-family:var(--sans-title-s-font-family, SB Sans Interface);
488
+ font-weight:var(--sans-title-s-font-weight, Semibold);
489
+ line-height:var(--sans-title-s-line-height, 20px);
490
+ font-size:var(--sans-title-s-font-size, 14px);
491
+ letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
492
+ paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
493
+ }
494
+ .link[data-size=s][data-purpose=title][data-text-mode=accent]{
495
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
496
+ font-weight:var(--link-title-s-font-weight, Semibold);
497
+ line-height:var(--link-title-s-line-height, 20px);
498
+ font-size:var(--link-title-s-font-size, 14px);
499
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
500
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
501
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
502
+ text-decoration:var(--link-title-s-text-decoration, underline);
503
+ }
504
+ .link[data-size=s][data-purpose=title][data-text-mode=on-accent]{
505
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
506
+ font-weight:var(--link-title-s-font-weight, Semibold);
507
+ line-height:var(--link-title-s-line-height, 20px);
508
+ font-size:var(--link-title-s-font-size, 14px);
509
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
510
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
511
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
512
+ text-decoration:var(--link-title-s-text-decoration, underline);
513
+ }
514
+ .link[data-size=s][data-purpose=label][data-text-mode=default]{
515
+ font-family:var(--sans-label-s-font-family, SB Sans Interface);
516
+ font-weight:var(--sans-label-s-font-weight, Semibold);
517
+ line-height:var(--sans-label-s-line-height, 14px);
518
+ font-size:var(--sans-label-s-font-size, 11px);
519
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
520
+ paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
521
+ }
522
+ .link[data-size=s][data-purpose=label][data-text-mode=accent]{
523
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
524
+ font-weight:var(--link-label-s-font-weight, Semibold);
525
+ line-height:var(--link-label-s-line-height, 14px);
526
+ font-size:var(--link-label-s-font-size, 11px);
527
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
528
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
529
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
530
+ text-decoration:var(--link-label-s-text-decoration, underline);
531
+ }
532
+ .link[data-size=s][data-purpose=label][data-text-mode=on-accent]{
533
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
534
+ font-weight:var(--link-label-s-font-weight, Semibold);
535
+ line-height:var(--link-label-s-line-height, 14px);
536
+ font-size:var(--link-label-s-font-size, 11px);
537
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
538
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
539
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
540
+ text-decoration:var(--link-label-s-text-decoration, underline);
541
+ }
542
+ .link[data-size=s][data-purpose=body][data-text-mode=default]{
430
543
  font-family:var(--sans-body-s-font-family, SB Sans Interface);
431
544
  font-weight:var(--sans-body-s-font-weight, Regular);
432
545
  line-height:var(--sans-body-s-line-height, 16px);
@@ -434,7 +547,7 @@
434
547
  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
435
548
  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
436
549
  }
437
- .link[data-size=s][data-text-mode=accent]{
550
+ .link[data-size=s][data-purpose=body][data-text-mode=accent]{
438
551
  font-family:var(--link-body-s-font-family, SB Sans Interface);
439
552
  font-weight:var(--link-body-s-font-weight, Regular);
440
553
  line-height:var(--link-body-s-line-height, 16px);
@@ -444,7 +557,7 @@
444
557
  -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
445
558
  text-decoration:var(--link-body-s-text-decoration, underline);
446
559
  }
447
- .link[data-size=s][data-text-mode=on-accent]{
560
+ .link[data-size=s][data-purpose=body][data-text-mode=on-accent]{
448
561
  font-family:var(--link-body-s-font-family, SB Sans Interface);
449
562
  font-weight:var(--link-body-s-font-weight, Regular);
450
563
  line-height:var(--link-body-s-line-height, 16px);
@@ -461,8 +574,121 @@
461
574
  .link[data-size=m]{
462
575
  height:var(--size-link-m, 20px);
463
576
  gap:var(--space-link-gap-single, 0px);
464
- }
465
- .link[data-size=m][data-text-mode=default]{
577
+ height:auto;
578
+ }
579
+ .link[data-size=m][data-purpose=display][data-text-mode=default]{
580
+ font-family:var(--sans-display-m-font-family, SB Sans Interface);
581
+ font-weight:var(--sans-display-m-font-weight, Semibold);
582
+ line-height:var(--sans-display-m-line-height, 60px);
583
+ font-size:var(--sans-display-m-font-size, 48px);
584
+ letter-spacing:var(--sans-display-m-letter-spacing, -0.5px);
585
+ paragraph-spacing:var(--sans-display-m-paragraph-spacing, 26.4px);
586
+ }
587
+ .link[data-size=m][data-purpose=display][data-text-mode=accent]{
588
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
589
+ font-weight:var(--link-display-m-font-weight, Semibold);
590
+ line-height:var(--link-display-m-line-height, 60px);
591
+ font-size:var(--link-display-m-font-size, 48px);
592
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
593
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
594
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
595
+ text-decoration:var(--link-display-m-text-decoration, underline);
596
+ }
597
+ .link[data-size=m][data-purpose=display][data-text-mode=on-accent]{
598
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
599
+ font-weight:var(--link-display-m-font-weight, Semibold);
600
+ line-height:var(--link-display-m-line-height, 60px);
601
+ font-size:var(--link-display-m-font-size, 48px);
602
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
603
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
604
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
605
+ text-decoration:var(--link-display-m-text-decoration, underline);
606
+ }
607
+ .link[data-size=m][data-purpose=headline][data-text-mode=default]{
608
+ font-family:var(--sans-headline-m-font-family, SB Sans Interface);
609
+ font-weight:var(--sans-headline-m-font-weight, Semibold);
610
+ line-height:var(--sans-headline-m-line-height, 36px);
611
+ font-size:var(--sans-headline-m-font-size, 28px);
612
+ letter-spacing:var(--sans-headline-m-letter-spacing, -0.5px);
613
+ paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
614
+ }
615
+ .link[data-size=m][data-purpose=headline][data-text-mode=accent]{
616
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
617
+ font-weight:var(--link-headline-m-font-weight, Semibold);
618
+ line-height:var(--link-headline-m-line-height, 36px);
619
+ font-size:var(--link-headline-m-font-size, 28px);
620
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
621
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
622
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
623
+ text-decoration:var(--link-headline-m-text-decoration, underline);
624
+ }
625
+ .link[data-size=m][data-purpose=headline][data-text-mode=on-accent]{
626
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
627
+ font-weight:var(--link-headline-m-font-weight, Semibold);
628
+ line-height:var(--link-headline-m-line-height, 36px);
629
+ font-size:var(--link-headline-m-font-size, 28px);
630
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
631
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
632
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
633
+ text-decoration:var(--link-headline-m-text-decoration, underline);
634
+ }
635
+ .link[data-size=m][data-purpose=title][data-text-mode=default]{
636
+ font-family:var(--sans-title-m-font-family, SB Sans Interface);
637
+ font-weight:var(--sans-title-m-font-weight, Semibold);
638
+ line-height:var(--sans-title-m-line-height, 24px);
639
+ font-size:var(--sans-title-m-font-size, 16px);
640
+ letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
641
+ paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
642
+ }
643
+ .link[data-size=m][data-purpose=title][data-text-mode=accent]{
644
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
645
+ font-weight:var(--link-title-m-font-weight, Semibold);
646
+ line-height:var(--link-title-m-line-height, 24px);
647
+ font-size:var(--link-title-m-font-size, 16px);
648
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
649
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
650
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
651
+ text-decoration:var(--link-title-m-text-decoration, underline);
652
+ }
653
+ .link[data-size=m][data-purpose=title][data-text-mode=on-accent]{
654
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
655
+ font-weight:var(--link-title-m-font-weight, Semibold);
656
+ line-height:var(--link-title-m-line-height, 24px);
657
+ font-size:var(--link-title-m-font-size, 16px);
658
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
659
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
660
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
661
+ text-decoration:var(--link-title-m-text-decoration, underline);
662
+ }
663
+ .link[data-size=m][data-purpose=label][data-text-mode=default]{
664
+ font-family:var(--sans-label-m-font-family, SB Sans Interface);
665
+ font-weight:var(--sans-label-m-font-weight, Semibold);
666
+ line-height:var(--sans-label-m-line-height, 16px);
667
+ font-size:var(--sans-label-m-font-size, 12px);
668
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
669
+ paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
670
+ }
671
+ .link[data-size=m][data-purpose=label][data-text-mode=accent]{
672
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
673
+ font-weight:var(--link-label-m-font-weight, Semibold);
674
+ line-height:var(--link-label-m-line-height, 16px);
675
+ font-size:var(--link-label-m-font-size, 12px);
676
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
677
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
678
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
679
+ text-decoration:var(--link-label-m-text-decoration, underline);
680
+ }
681
+ .link[data-size=m][data-purpose=label][data-text-mode=on-accent]{
682
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
683
+ font-weight:var(--link-label-m-font-weight, Semibold);
684
+ line-height:var(--link-label-m-line-height, 16px);
685
+ font-size:var(--link-label-m-font-size, 12px);
686
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
687
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
688
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
689
+ text-decoration:var(--link-label-m-text-decoration, underline);
690
+ }
691
+ .link[data-size=m][data-purpose=body][data-text-mode=default]{
466
692
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
467
693
  font-weight:var(--sans-body-m-font-weight, Regular);
468
694
  line-height:var(--sans-body-m-line-height, 20px);
@@ -470,7 +696,7 @@
470
696
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
471
697
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
472
698
  }
473
- .link[data-size=m][data-text-mode=accent]{
699
+ .link[data-size=m][data-purpose=body][data-text-mode=accent]{
474
700
  font-family:var(--link-body-m-font-family, SB Sans Interface);
475
701
  font-weight:var(--link-body-m-font-weight, Regular);
476
702
  line-height:var(--link-body-m-line-height, 20px);
@@ -480,7 +706,7 @@
480
706
  -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
481
707
  text-decoration:var(--link-body-m-text-decoration, underline);
482
708
  }
483
- .link[data-size=m][data-text-mode=on-accent]{
709
+ .link[data-size=m][data-purpose=body][data-text-mode=on-accent]{
484
710
  font-family:var(--link-body-m-font-family, SB Sans Interface);
485
711
  font-weight:var(--link-body-m-font-weight, Regular);
486
712
  line-height:var(--link-body-m-line-height, 20px);
@@ -497,8 +723,121 @@
497
723
  .link[data-size=l]{
498
724
  height:var(--size-link-l, 24px);
499
725
  gap:var(--space-link-gap-single, 0px);
500
- }
501
- .link[data-size=l][data-text-mode=default]{
726
+ height:auto;
727
+ }
728
+ .link[data-size=l][data-purpose=display][data-text-mode=default]{
729
+ font-family:var(--sans-display-l-font-family, SB Sans Interface);
730
+ font-weight:var(--sans-display-l-font-weight, Bold);
731
+ line-height:var(--sans-display-l-line-height, 72px);
732
+ font-size:var(--sans-display-l-font-size, 56px);
733
+ letter-spacing:var(--sans-display-l-letter-spacing, -0.5px);
734
+ paragraph-spacing:var(--sans-display-l-paragraph-spacing, 30.8px);
735
+ }
736
+ .link[data-size=l][data-purpose=display][data-text-mode=accent]{
737
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
738
+ font-weight:var(--link-display-l-font-weight, Bold);
739
+ line-height:var(--link-display-l-line-height, 72px);
740
+ font-size:var(--link-display-l-font-size, 56px);
741
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
742
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
743
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
744
+ text-decoration:var(--link-display-l-text-decoration, underline);
745
+ }
746
+ .link[data-size=l][data-purpose=display][data-text-mode=on-accent]{
747
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
748
+ font-weight:var(--link-display-l-font-weight, Bold);
749
+ line-height:var(--link-display-l-line-height, 72px);
750
+ font-size:var(--link-display-l-font-size, 56px);
751
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
752
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
753
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
754
+ text-decoration:var(--link-display-l-text-decoration, underline);
755
+ }
756
+ .link[data-size=l][data-purpose=headline][data-text-mode=default]{
757
+ font-family:var(--sans-headline-l-font-family, SB Sans Interface);
758
+ font-weight:var(--sans-headline-l-font-weight, Semibold);
759
+ line-height:var(--sans-headline-l-line-height, 40px);
760
+ font-size:var(--sans-headline-l-font-size, 32px);
761
+ letter-spacing:var(--sans-headline-l-letter-spacing, -0.5px);
762
+ paragraph-spacing:var(--sans-headline-l-paragraph-spacing, 17.6px);
763
+ }
764
+ .link[data-size=l][data-purpose=headline][data-text-mode=accent]{
765
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
766
+ font-weight:var(--link-headline-l-font-weight, Semibold);
767
+ line-height:var(--link-headline-l-line-height, 40px);
768
+ font-size:var(--link-headline-l-font-size, 32px);
769
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
770
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
771
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
772
+ text-decoration:var(--link-headline-l-text-decoration, underline);
773
+ }
774
+ .link[data-size=l][data-purpose=headline][data-text-mode=on-accent]{
775
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
776
+ font-weight:var(--link-headline-l-font-weight, Semibold);
777
+ line-height:var(--link-headline-l-line-height, 40px);
778
+ font-size:var(--link-headline-l-font-size, 32px);
779
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
780
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
781
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
782
+ text-decoration:var(--link-headline-l-text-decoration, underline);
783
+ }
784
+ .link[data-size=l][data-purpose=title][data-text-mode=default]{
785
+ font-family:var(--sans-title-l-font-family, SB Sans Interface);
786
+ font-weight:var(--sans-title-l-font-weight, Semibold);
787
+ line-height:var(--sans-title-l-line-height, 28px);
788
+ font-size:var(--sans-title-l-font-size, 20px);
789
+ letter-spacing:var(--sans-title-l-letter-spacing, 0.15px);
790
+ paragraph-spacing:var(--sans-title-l-paragraph-spacing, 11px);
791
+ }
792
+ .link[data-size=l][data-purpose=title][data-text-mode=accent]{
793
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
794
+ font-weight:var(--link-title-l-font-weight, Semibold);
795
+ line-height:var(--link-title-l-line-height, 28px);
796
+ font-size:var(--link-title-l-font-size, 20px);
797
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
798
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
799
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
800
+ text-decoration:var(--link-title-l-text-decoration, underline);
801
+ }
802
+ .link[data-size=l][data-purpose=title][data-text-mode=on-accent]{
803
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
804
+ font-weight:var(--link-title-l-font-weight, Semibold);
805
+ line-height:var(--link-title-l-line-height, 28px);
806
+ font-size:var(--link-title-l-font-size, 20px);
807
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
808
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
809
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
810
+ text-decoration:var(--link-title-l-text-decoration, underline);
811
+ }
812
+ .link[data-size=l][data-purpose=label][data-text-mode=default]{
813
+ font-family:var(--sans-label-l-font-family, SB Sans Interface);
814
+ font-weight:var(--sans-label-l-font-weight, Semibold);
815
+ line-height:var(--sans-label-l-line-height, 20px);
816
+ font-size:var(--sans-label-l-font-size, 14px);
817
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
818
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
819
+ }
820
+ .link[data-size=l][data-purpose=label][data-text-mode=accent]{
821
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
822
+ font-weight:var(--link-label-l-font-weight, Semibold);
823
+ line-height:var(--link-label-l-line-height, 20px);
824
+ font-size:var(--link-label-l-font-size, 14px);
825
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
826
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
827
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
828
+ text-decoration:var(--link-label-l-text-decoration, underline);
829
+ }
830
+ .link[data-size=l][data-purpose=label][data-text-mode=on-accent]{
831
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
832
+ font-weight:var(--link-label-l-font-weight, Semibold);
833
+ line-height:var(--link-label-l-line-height, 20px);
834
+ font-size:var(--link-label-l-font-size, 14px);
835
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
836
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
837
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
838
+ text-decoration:var(--link-label-l-text-decoration, underline);
839
+ }
840
+ .link[data-size=l][data-purpose=body][data-text-mode=default]{
502
841
  font-family:var(--sans-body-l-font-family, SB Sans Interface);
503
842
  font-weight:var(--sans-body-l-font-weight, Regular);
504
843
  line-height:var(--sans-body-l-line-height, 24px);
@@ -506,7 +845,7 @@
506
845
  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
507
846
  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
508
847
  }
509
- .link[data-size=l][data-text-mode=accent]{
848
+ .link[data-size=l][data-purpose=body][data-text-mode=accent]{
510
849
  font-family:var(--link-body-l-font-family, SB Sans Interface);
511
850
  font-weight:var(--link-body-l-font-weight, Regular);
512
851
  line-height:var(--link-body-l-line-height, 24px);
@@ -516,7 +855,7 @@
516
855
  -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
517
856
  text-decoration:var(--link-body-l-text-decoration, underline);
518
857
  }
519
- .link[data-size=l][data-text-mode=on-accent]{
858
+ .link[data-size=l][data-purpose=body][data-text-mode=on-accent]{
520
859
  font-family:var(--link-body-l-font-family, SB Sans Interface);
521
860
  font-weight:var(--link-body-l-font-weight, Regular);
522
861
  line-height:var(--link-body-l-line-height, 24px);
package/dist/cjs/components/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ComponentPropsWithoutRef, ElementType } from 'react';
2
2
  import { TruncateStringProps } from '@snack-uikit/truncate-string';
3
3
  import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
4
- import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
4
+ import { APPEARANCE, PURPOSE, SIZE, TEXT_MODE } from './constants';
5
5
  export type Appearance = ValueOf<typeof APPEARANCE>;
6
6
  export type Size = ValueOf<typeof SIZE>;
7
+ export type Purpose = ValueOf<typeof PURPOSE>;
7
8
  export type TextMode = ValueOf<typeof TEXT_MODE>;
8
9
  export type BaseProps = WithSupportProps<{
9
10
  /** Текст ссылки */
@@ -12,6 +13,10 @@ export type BaseProps = WithSupportProps<{
12
13
  * @default 's'
13
14
  */
14
15
  size?: Size;
16
+ /** Роль
17
+ * @default 'body'
18
+ */
19
+ purpose?: Purpose;
15
20
  /** Стилизует ссылку для размещения на цветном фоне
16
21
  * @default 'primary'
17
22
  */
package/dist/esm/components/Link.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ElementType } from 'react';
2
2
  import { LinkProps } from './types';
3
3
  /** Компонент ссылка */
4
- export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
4
+ export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
package/dist/esm/components/Link.js CHANGED
@@ -13,12 +13,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import cn from 'classnames';
14
14
  import { TruncateString } from '@snack-uikit/truncate-string';
15
15
  import { extractSupportProps } from '@snack-uikit/utils';
16
- import { APPEARANCE, SIZE, TARGET, TEXT_MODE } from './constants';
16
+ import { APPEARANCE, PURPOSE, SIZE, TARGET, TEXT_MODE } from './constants';
17
17
  import styles from './styles.module.css';
18
18
  /** Компонент ссылка */
19
19
  export function Link(_a) {
20
20
  var _b, _c;
21
- var { text = '', className, textMode = TEXT_MODE.Default, size = SIZE.S, appearance = APPEARANCE.Primary, insideText = false, truncateVariant, as } = _a, rest = __rest(_a, ["text", "className", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
21
+ var { text = '', className, textMode = TEXT_MODE.Default, size = SIZE.S, purpose = PURPOSE.Body, appearance = APPEARANCE.Primary, insideText = false, truncateVariant, as } = _a, rest = __rest(_a, ["text", "className", "textMode", "size", "purpose", "appearance", "insideText", "truncateVariant", "as"]);
22
22
  const Component = as || 'a';
23
23
  let fallbackProps;
24
24
  if (Component === 'a') {
@@ -31,5 +31,5 @@ export function Link(_a) {
31
31
  else {
32
32
  fallbackProps = rest;
33
33
  }
34
- return (_jsx(Component, Object.assign({ className: cn(styles.link, className) }, fallbackProps, { "data-size": size, "data-text-mode": textMode, "data-appearance": appearance, "data-inside-text": insideText || undefined, children: insideText ? text : _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) })));
34
+ return (_jsx(Component, Object.assign({ className: cn(styles.link, className) }, fallbackProps, { "data-size": size, "data-purpose": purpose, "data-text-mode": textMode, "data-appearance": appearance, "data-inside-text": insideText || undefined, children: insideText ? text : _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) })));
35
35
  }
package/dist/esm/components/constants.d.ts CHANGED
@@ -15,6 +15,13 @@ export declare const SIZE: {
15
15
  readonly M: "m";
16
16
  readonly L: "l";
17
17
  };
18
+ export declare const PURPOSE: {
19
+ readonly Display: "display";
20
+ readonly Headline: "headline";
21
+ readonly Title: "title";
22
+ readonly Label: "label";
23
+ readonly Body: "body";
24
+ };
18
25
  export declare const TARGET: {
19
26
  readonly Self: "_self";
20
27
  readonly Blank: "_blank";
package/dist/esm/components/constants.js CHANGED
@@ -15,6 +15,13 @@ export const SIZE = {
15
15
  M: 'm',
16
16
  L: 'l',
17
17
  };
18
+ export const PURPOSE = {
19
+ Display: 'display',
20
+ Headline: 'headline',
21
+ Title: 'title',
22
+ Label: 'label',
23
+ Body: 'body',
24
+ };
18
25
  export const TARGET = {
19
26
  Self: '_self',
20
27
  Blank: '_blank',
package/dist/esm/components/styles.module.css CHANGED
@@ -425,8 +425,121 @@
425
425
  .link[data-size=s]{
426
426
  height:var(--size-link-s, 16px);
427
427
  gap:var(--space-link-gap-single, 0px);
428
- }
429
- .link[data-size=s][data-text-mode=default]{
428
+ height:auto;
429
+ }
430
+ .link[data-size=s][data-purpose=display][data-text-mode=default]{
431
+ font-family:var(--sans-display-s-font-family, SB Sans Interface);
432
+ font-weight:var(--sans-display-s-font-weight, Semibold);
433
+ line-height:var(--sans-display-s-line-height, 48px);
434
+ font-size:var(--sans-display-s-font-size, 40px);
435
+ letter-spacing:var(--sans-display-s-letter-spacing, -0.5px);
436
+ paragraph-spacing:var(--sans-display-s-paragraph-spacing, 22px);
437
+ }
438
+ .link[data-size=s][data-purpose=display][data-text-mode=accent]{
439
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
440
+ font-weight:var(--link-display-s-font-weight, Semibold);
441
+ line-height:var(--link-display-s-line-height, 48px);
442
+ font-size:var(--link-display-s-font-size, 40px);
443
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
444
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
445
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
446
+ text-decoration:var(--link-display-s-text-decoration, underline);
447
+ }
448
+ .link[data-size=s][data-purpose=display][data-text-mode=on-accent]{
449
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
450
+ font-weight:var(--link-display-s-font-weight, Semibold);
451
+ line-height:var(--link-display-s-line-height, 48px);
452
+ font-size:var(--link-display-s-font-size, 40px);
453
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
454
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
455
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
456
+ text-decoration:var(--link-display-s-text-decoration, underline);
457
+ }
458
+ .link[data-size=s][data-purpose=headline][data-text-mode=default]{
459
+ font-family:var(--sans-headline-s-font-family, SB Sans Interface);
460
+ font-weight:var(--sans-headline-s-font-weight, Semibold);
461
+ line-height:var(--sans-headline-s-line-height, 32px);
462
+ font-size:var(--sans-headline-s-font-size, 24px);
463
+ letter-spacing:var(--sans-headline-s-letter-spacing, -0.5px);
464
+ paragraph-spacing:var(--sans-headline-s-paragraph-spacing, 13.2px);
465
+ }
466
+ .link[data-size=s][data-purpose=headline][data-text-mode=accent]{
467
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
468
+ font-weight:var(--link-headline-s-font-weight, Semibold);
469
+ line-height:var(--link-headline-s-line-height, 32px);
470
+ font-size:var(--link-headline-s-font-size, 24px);
471
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
472
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
473
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
474
+ text-decoration:var(--link-headline-s-text-decoration, underline);
475
+ }
476
+ .link[data-size=s][data-purpose=headline][data-text-mode=on-accent]{
477
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
478
+ font-weight:var(--link-headline-s-font-weight, Semibold);
479
+ line-height:var(--link-headline-s-line-height, 32px);
480
+ font-size:var(--link-headline-s-font-size, 24px);
481
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
482
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
483
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
484
+ text-decoration:var(--link-headline-s-text-decoration, underline);
485
+ }
486
+ .link[data-size=s][data-purpose=title][data-text-mode=default]{
487
+ font-family:var(--sans-title-s-font-family, SB Sans Interface);
488
+ font-weight:var(--sans-title-s-font-weight, Semibold);
489
+ line-height:var(--sans-title-s-line-height, 20px);
490
+ font-size:var(--sans-title-s-font-size, 14px);
491
+ letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
492
+ paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
493
+ }
494
+ .link[data-size=s][data-purpose=title][data-text-mode=accent]{
495
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
496
+ font-weight:var(--link-title-s-font-weight, Semibold);
497
+ line-height:var(--link-title-s-line-height, 20px);
498
+ font-size:var(--link-title-s-font-size, 14px);
499
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
500
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
501
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
502
+ text-decoration:var(--link-title-s-text-decoration, underline);
503
+ }
504
+ .link[data-size=s][data-purpose=title][data-text-mode=on-accent]{
505
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
506
+ font-weight:var(--link-title-s-font-weight, Semibold);
507
+ line-height:var(--link-title-s-line-height, 20px);
508
+ font-size:var(--link-title-s-font-size, 14px);
509
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
510
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
511
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
512
+ text-decoration:var(--link-title-s-text-decoration, underline);
513
+ }
514
+ .link[data-size=s][data-purpose=label][data-text-mode=default]{
515
+ font-family:var(--sans-label-s-font-family, SB Sans Interface);
516
+ font-weight:var(--sans-label-s-font-weight, Semibold);
517
+ line-height:var(--sans-label-s-line-height, 14px);
518
+ font-size:var(--sans-label-s-font-size, 11px);
519
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
520
+ paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
521
+ }
522
+ .link[data-size=s][data-purpose=label][data-text-mode=accent]{
523
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
524
+ font-weight:var(--link-label-s-font-weight, Semibold);
525
+ line-height:var(--link-label-s-line-height, 14px);
526
+ font-size:var(--link-label-s-font-size, 11px);
527
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
528
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
529
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
530
+ text-decoration:var(--link-label-s-text-decoration, underline);
531
+ }
532
+ .link[data-size=s][data-purpose=label][data-text-mode=on-accent]{
533
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
534
+ font-weight:var(--link-label-s-font-weight, Semibold);
535
+ line-height:var(--link-label-s-line-height, 14px);
536
+ font-size:var(--link-label-s-font-size, 11px);
537
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
538
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
539
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
540
+ text-decoration:var(--link-label-s-text-decoration, underline);
541
+ }
542
+ .link[data-size=s][data-purpose=body][data-text-mode=default]{
430
543
  font-family:var(--sans-body-s-font-family, SB Sans Interface);
431
544
  font-weight:var(--sans-body-s-font-weight, Regular);
432
545
  line-height:var(--sans-body-s-line-height, 16px);
@@ -434,7 +547,7 @@
434
547
  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
435
548
  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
436
549
  }
437
- .link[data-size=s][data-text-mode=accent]{
550
+ .link[data-size=s][data-purpose=body][data-text-mode=accent]{
438
551
  font-family:var(--link-body-s-font-family, SB Sans Interface);
439
552
  font-weight:var(--link-body-s-font-weight, Regular);
440
553
  line-height:var(--link-body-s-line-height, 16px);
@@ -444,7 +557,7 @@
444
557
  -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
445
558
  text-decoration:var(--link-body-s-text-decoration, underline);
446
559
  }
447
- .link[data-size=s][data-text-mode=on-accent]{
560
+ .link[data-size=s][data-purpose=body][data-text-mode=on-accent]{
448
561
  font-family:var(--link-body-s-font-family, SB Sans Interface);
449
562
  font-weight:var(--link-body-s-font-weight, Regular);
450
563
  line-height:var(--link-body-s-line-height, 16px);
@@ -461,8 +574,121 @@
461
574
  .link[data-size=m]{
462
575
  height:var(--size-link-m, 20px);
463
576
  gap:var(--space-link-gap-single, 0px);
464
- }
465
- .link[data-size=m][data-text-mode=default]{
577
+ height:auto;
578
+ }
579
+ .link[data-size=m][data-purpose=display][data-text-mode=default]{
580
+ font-family:var(--sans-display-m-font-family, SB Sans Interface);
581
+ font-weight:var(--sans-display-m-font-weight, Semibold);
582
+ line-height:var(--sans-display-m-line-height, 60px);
583
+ font-size:var(--sans-display-m-font-size, 48px);
584
+ letter-spacing:var(--sans-display-m-letter-spacing, -0.5px);
585
+ paragraph-spacing:var(--sans-display-m-paragraph-spacing, 26.4px);
586
+ }
587
+ .link[data-size=m][data-purpose=display][data-text-mode=accent]{
588
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
589
+ font-weight:var(--link-display-m-font-weight, Semibold);
590
+ line-height:var(--link-display-m-line-height, 60px);
591
+ font-size:var(--link-display-m-font-size, 48px);
592
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
593
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
594
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
595
+ text-decoration:var(--link-display-m-text-decoration, underline);
596
+ }
597
+ .link[data-size=m][data-purpose=display][data-text-mode=on-accent]{
598
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
599
+ font-weight:var(--link-display-m-font-weight, Semibold);
600
+ line-height:var(--link-display-m-line-height, 60px);
601
+ font-size:var(--link-display-m-font-size, 48px);
602
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
603
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
604
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
605
+ text-decoration:var(--link-display-m-text-decoration, underline);
606
+ }
607
+ .link[data-size=m][data-purpose=headline][data-text-mode=default]{
608
+ font-family:var(--sans-headline-m-font-family, SB Sans Interface);
609
+ font-weight:var(--sans-headline-m-font-weight, Semibold);
610
+ line-height:var(--sans-headline-m-line-height, 36px);
611
+ font-size:var(--sans-headline-m-font-size, 28px);
612
+ letter-spacing:var(--sans-headline-m-letter-spacing, -0.5px);
613
+ paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
614
+ }
615
+ .link[data-size=m][data-purpose=headline][data-text-mode=accent]{
616
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
617
+ font-weight:var(--link-headline-m-font-weight, Semibold);
618
+ line-height:var(--link-headline-m-line-height, 36px);
619
+ font-size:var(--link-headline-m-font-size, 28px);
620
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
621
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
622
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
623
+ text-decoration:var(--link-headline-m-text-decoration, underline);
624
+ }
625
+ .link[data-size=m][data-purpose=headline][data-text-mode=on-accent]{
626
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
627
+ font-weight:var(--link-headline-m-font-weight, Semibold);
628
+ line-height:var(--link-headline-m-line-height, 36px);
629
+ font-size:var(--link-headline-m-font-size, 28px);
630
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
631
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
632
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
633
+ text-decoration:var(--link-headline-m-text-decoration, underline);
634
+ }
635
+ .link[data-size=m][data-purpose=title][data-text-mode=default]{
636
+ font-family:var(--sans-title-m-font-family, SB Sans Interface);
637
+ font-weight:var(--sans-title-m-font-weight, Semibold);
638
+ line-height:var(--sans-title-m-line-height, 24px);
639
+ font-size:var(--sans-title-m-font-size, 16px);
640
+ letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
641
+ paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
642
+ }
643
+ .link[data-size=m][data-purpose=title][data-text-mode=accent]{
644
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
645
+ font-weight:var(--link-title-m-font-weight, Semibold);
646
+ line-height:var(--link-title-m-line-height, 24px);
647
+ font-size:var(--link-title-m-font-size, 16px);
648
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
649
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
650
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
651
+ text-decoration:var(--link-title-m-text-decoration, underline);
652
+ }
653
+ .link[data-size=m][data-purpose=title][data-text-mode=on-accent]{
654
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
655
+ font-weight:var(--link-title-m-font-weight, Semibold);
656
+ line-height:var(--link-title-m-line-height, 24px);
657
+ font-size:var(--link-title-m-font-size, 16px);
658
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
659
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
660
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
661
+ text-decoration:var(--link-title-m-text-decoration, underline);
662
+ }
663
+ .link[data-size=m][data-purpose=label][data-text-mode=default]{
664
+ font-family:var(--sans-label-m-font-family, SB Sans Interface);
665
+ font-weight:var(--sans-label-m-font-weight, Semibold);
666
+ line-height:var(--sans-label-m-line-height, 16px);
667
+ font-size:var(--sans-label-m-font-size, 12px);
668
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
669
+ paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
670
+ }
671
+ .link[data-size=m][data-purpose=label][data-text-mode=accent]{
672
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
673
+ font-weight:var(--link-label-m-font-weight, Semibold);
674
+ line-height:var(--link-label-m-line-height, 16px);
675
+ font-size:var(--link-label-m-font-size, 12px);
676
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
677
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
678
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
679
+ text-decoration:var(--link-label-m-text-decoration, underline);
680
+ }
681
+ .link[data-size=m][data-purpose=label][data-text-mode=on-accent]{
682
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
683
+ font-weight:var(--link-label-m-font-weight, Semibold);
684
+ line-height:var(--link-label-m-line-height, 16px);
685
+ font-size:var(--link-label-m-font-size, 12px);
686
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
687
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
688
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
689
+ text-decoration:var(--link-label-m-text-decoration, underline);
690
+ }
691
+ .link[data-size=m][data-purpose=body][data-text-mode=default]{
466
692
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
467
693
  font-weight:var(--sans-body-m-font-weight, Regular);
468
694
  line-height:var(--sans-body-m-line-height, 20px);
@@ -470,7 +696,7 @@
470
696
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
471
697
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
472
698
  }
473
- .link[data-size=m][data-text-mode=accent]{
699
+ .link[data-size=m][data-purpose=body][data-text-mode=accent]{
474
700
  font-family:var(--link-body-m-font-family, SB Sans Interface);
475
701
  font-weight:var(--link-body-m-font-weight, Regular);
476
702
  line-height:var(--link-body-m-line-height, 20px);
@@ -480,7 +706,7 @@
480
706
  -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
481
707
  text-decoration:var(--link-body-m-text-decoration, underline);
482
708
  }
483
- .link[data-size=m][data-text-mode=on-accent]{
709
+ .link[data-size=m][data-purpose=body][data-text-mode=on-accent]{
484
710
  font-family:var(--link-body-m-font-family, SB Sans Interface);
485
711
  font-weight:var(--link-body-m-font-weight, Regular);
486
712
  line-height:var(--link-body-m-line-height, 20px);
@@ -497,8 +723,121 @@
497
723
  .link[data-size=l]{
498
724
  height:var(--size-link-l, 24px);
499
725
  gap:var(--space-link-gap-single, 0px);
500
- }
501
- .link[data-size=l][data-text-mode=default]{
726
+ height:auto;
727
+ }
728
+ .link[data-size=l][data-purpose=display][data-text-mode=default]{
729
+ font-family:var(--sans-display-l-font-family, SB Sans Interface);
730
+ font-weight:var(--sans-display-l-font-weight, Bold);
731
+ line-height:var(--sans-display-l-line-height, 72px);
732
+ font-size:var(--sans-display-l-font-size, 56px);
733
+ letter-spacing:var(--sans-display-l-letter-spacing, -0.5px);
734
+ paragraph-spacing:var(--sans-display-l-paragraph-spacing, 30.8px);
735
+ }
736
+ .link[data-size=l][data-purpose=display][data-text-mode=accent]{
737
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
738
+ font-weight:var(--link-display-l-font-weight, Bold);
739
+ line-height:var(--link-display-l-line-height, 72px);
740
+ font-size:var(--link-display-l-font-size, 56px);
741
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
742
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
743
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
744
+ text-decoration:var(--link-display-l-text-decoration, underline);
745
+ }
746
+ .link[data-size=l][data-purpose=display][data-text-mode=on-accent]{
747
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
748
+ font-weight:var(--link-display-l-font-weight, Bold);
749
+ line-height:var(--link-display-l-line-height, 72px);
750
+ font-size:var(--link-display-l-font-size, 56px);
751
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
752
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
753
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
754
+ text-decoration:var(--link-display-l-text-decoration, underline);
755
+ }
756
+ .link[data-size=l][data-purpose=headline][data-text-mode=default]{
757
+ font-family:var(--sans-headline-l-font-family, SB Sans Interface);
758
+ font-weight:var(--sans-headline-l-font-weight, Semibold);
759
+ line-height:var(--sans-headline-l-line-height, 40px);
760
+ font-size:var(--sans-headline-l-font-size, 32px);
761
+ letter-spacing:var(--sans-headline-l-letter-spacing, -0.5px);
762
+ paragraph-spacing:var(--sans-headline-l-paragraph-spacing, 17.6px);
763
+ }
764
+ .link[data-size=l][data-purpose=headline][data-text-mode=accent]{
765
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
766
+ font-weight:var(--link-headline-l-font-weight, Semibold);
767
+ line-height:var(--link-headline-l-line-height, 40px);
768
+ font-size:var(--link-headline-l-font-size, 32px);
769
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
770
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
771
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
772
+ text-decoration:var(--link-headline-l-text-decoration, underline);
773
+ }
774
+ .link[data-size=l][data-purpose=headline][data-text-mode=on-accent]{
775
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
776
+ font-weight:var(--link-headline-l-font-weight, Semibold);
777
+ line-height:var(--link-headline-l-line-height, 40px);
778
+ font-size:var(--link-headline-l-font-size, 32px);
779
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
780
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
781
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
782
+ text-decoration:var(--link-headline-l-text-decoration, underline);
783
+ }
784
+ .link[data-size=l][data-purpose=title][data-text-mode=default]{
785
+ font-family:var(--sans-title-l-font-family, SB Sans Interface);
786
+ font-weight:var(--sans-title-l-font-weight, Semibold);
787
+ line-height:var(--sans-title-l-line-height, 28px);
788
+ font-size:var(--sans-title-l-font-size, 20px);
789
+ letter-spacing:var(--sans-title-l-letter-spacing, 0.15px);
790
+ paragraph-spacing:var(--sans-title-l-paragraph-spacing, 11px);
791
+ }
792
+ .link[data-size=l][data-purpose=title][data-text-mode=accent]{
793
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
794
+ font-weight:var(--link-title-l-font-weight, Semibold);
795
+ line-height:var(--link-title-l-line-height, 28px);
796
+ font-size:var(--link-title-l-font-size, 20px);
797
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
798
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
799
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
800
+ text-decoration:var(--link-title-l-text-decoration, underline);
801
+ }
802
+ .link[data-size=l][data-purpose=title][data-text-mode=on-accent]{
803
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
804
+ font-weight:var(--link-title-l-font-weight, Semibold);
805
+ line-height:var(--link-title-l-line-height, 28px);
806
+ font-size:var(--link-title-l-font-size, 20px);
807
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
808
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
809
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
810
+ text-decoration:var(--link-title-l-text-decoration, underline);
811
+ }
812
+ .link[data-size=l][data-purpose=label][data-text-mode=default]{
813
+ font-family:var(--sans-label-l-font-family, SB Sans Interface);
814
+ font-weight:var(--sans-label-l-font-weight, Semibold);
815
+ line-height:var(--sans-label-l-line-height, 20px);
816
+ font-size:var(--sans-label-l-font-size, 14px);
817
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
818
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
819
+ }
820
+ .link[data-size=l][data-purpose=label][data-text-mode=accent]{
821
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
822
+ font-weight:var(--link-label-l-font-weight, Semibold);
823
+ line-height:var(--link-label-l-line-height, 20px);
824
+ font-size:var(--link-label-l-font-size, 14px);
825
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
826
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
827
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
828
+ text-decoration:var(--link-label-l-text-decoration, underline);
829
+ }
830
+ .link[data-size=l][data-purpose=label][data-text-mode=on-accent]{
831
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
832
+ font-weight:var(--link-label-l-font-weight, Semibold);
833
+ line-height:var(--link-label-l-line-height, 20px);
834
+ font-size:var(--link-label-l-font-size, 14px);
835
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
836
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
837
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
838
+ text-decoration:var(--link-label-l-text-decoration, underline);
839
+ }
840
+ .link[data-size=l][data-purpose=body][data-text-mode=default]{
502
841
  font-family:var(--sans-body-l-font-family, SB Sans Interface);
503
842
  font-weight:var(--sans-body-l-font-weight, Regular);
504
843
  line-height:var(--sans-body-l-line-height, 24px);
@@ -506,7 +845,7 @@
506
845
  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
507
846
  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
508
847
  }
509
- .link[data-size=l][data-text-mode=accent]{
848
+ .link[data-size=l][data-purpose=body][data-text-mode=accent]{
510
849
  font-family:var(--link-body-l-font-family, SB Sans Interface);
511
850
  font-weight:var(--link-body-l-font-weight, Regular);
512
851
  line-height:var(--link-body-l-line-height, 24px);
@@ -516,7 +855,7 @@
516
855
  -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
517
856
  text-decoration:var(--link-body-l-text-decoration, underline);
518
857
  }
519
- .link[data-size=l][data-text-mode=on-accent]{
858
+ .link[data-size=l][data-purpose=body][data-text-mode=on-accent]{
520
859
  font-family:var(--link-body-l-font-family, SB Sans Interface);
521
860
  font-weight:var(--link-body-l-font-weight, Regular);
522
861
  line-height:var(--link-body-l-line-height, 24px);
package/dist/esm/components/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ComponentPropsWithoutRef, ElementType } from 'react';
2
2
  import { TruncateStringProps } from '@snack-uikit/truncate-string';
3
3
  import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
4
- import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
4
+ import { APPEARANCE, PURPOSE, SIZE, TEXT_MODE } from './constants';
5
5
  export type Appearance = ValueOf<typeof APPEARANCE>;
6
6
  export type Size = ValueOf<typeof SIZE>;
7
+ export type Purpose = ValueOf<typeof PURPOSE>;
7
8
  export type TextMode = ValueOf<typeof TEXT_MODE>;
8
9
  export type BaseProps = WithSupportProps<{
9
10
  /** Текст ссылки */
@@ -12,6 +13,10 @@ export type BaseProps = WithSupportProps<{
12
13
  * @default 's'
13
14
  */
14
15
  size?: Size;
16
+ /** Роль
17
+ * @default 'body'
18
+ */
19
+ purpose?: Purpose;
15
20
  /** Стилизует ссылку для размещения на цветном фоне
16
21
  * @default 'primary'
17
22
  */
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Link",
7
- "version": "0.16.5",
7
+ "version": "0.16.6-preview-ccf49ef5.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -40,5 +40,5 @@
40
40
  "@snack-uikit/utils": "3.8.1",
41
41
  "classnames": "2.5.1"
42
42
  },
43
- "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
43
+ "gitHead": "68c7ead2580c8ea1ab17fd290e44f07ce5b69bda"
44
44
  }
package/src/components/Link.tsx CHANGED
@@ -4,7 +4,7 @@ import { ElementType } from 'react';
4
4
  import { TruncateString } from '@snack-uikit/truncate-string';
5
5
  import { extractSupportProps } from '@snack-uikit/utils';
6
6
 
7
- import { APPEARANCE, SIZE, TARGET, TEXT_MODE } from './constants';
7
+ import { APPEARANCE, PURPOSE, SIZE, TARGET, TEXT_MODE } from './constants';
8
8
  import styles from './styles.module.scss';
9
9
  import { LinkProps } from './types';
10
10
 
@@ -14,6 +14,7 @@ export function Link<T extends ElementType = 'a'>({
14
14
  className,
15
15
  textMode = TEXT_MODE.Default,
16
16
  size = SIZE.S,
17
+ purpose = PURPOSE.Body,
17
18
  appearance = APPEARANCE.Primary,
18
19
  insideText = false,
19
20
  truncateVariant,
@@ -42,6 +43,7 @@ export function Link<T extends ElementType = 'a'>({
42
43
  className={cn(styles.link, className)}
43
44
  {...fallbackProps}
44
45
  data-size={size}
46
+ data-purpose={purpose}
45
47
  data-text-mode={textMode}
46
48
  data-appearance={appearance}
47
49
  data-inside-text={insideText || undefined}
package/src/components/constants.ts CHANGED
@@ -17,6 +17,14 @@ export const SIZE = {
17
17
  L: 'l',
18
18
  } as const;
19
19
 
20
+ export const PURPOSE = {
21
+ Display: 'display',
22
+ Headline: 'headline',
23
+ Title: 'title',
24
+ Label: 'label',
25
+ Body: 'body',
26
+ } as const;
27
+
20
28
  export const TARGET = {
21
29
  Self: '_self',
22
30
  Blank: '_blank',
package/src/components/styles.module.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 's', 'm', 'l';
5
+ $purposes: 'display', 'headline', 'title', 'label', 'body';
5
6
  $text-modes: 'default', 'accent', 'on-accent';
6
7
  $appearances: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
7
8
  $icon-sizes: (
@@ -86,20 +87,26 @@ $icon-sizes: (
86
87
 
87
88
  @each $size in $sizes {
88
89
  &[data-size='#{$size}'] {
89
- @each $text-mode in $text-modes {
90
- &[data-text-mode='#{$text-mode}'] {
91
- @if $text-mode == 'default' {
92
- @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'sans', 'body', $size);
93
- }
90
+ @each $purpose in $purposes {
91
+ &[data-purpose='#{$purpose}'] {
92
+ @each $text-mode in $text-modes {
93
+ &[data-text-mode='#{$text-mode}'] {
94
+ @if $text-mode == 'default' {
95
+ @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'sans', $purpose, $size);
96
+ }
94
97
 
95
98
  @else {
96
- @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'link', 'body', $size);
99
+ @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'link', $purpose, $size);
100
+ }
101
+ }
97
102
  }
98
103
  }
99
104
  }
100
105
 
101
106
  @include styles-tokens-link.composite-var(styles-tokens-link.$link, 'container', $size);
102
107
 
108
+ height: auto;
109
+
103
110
  svg {
104
111
  width: styles-tokens-link.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
105
112
  height: styles-tokens-link.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
package/src/components/types.ts CHANGED
@@ -3,12 +3,14 @@ import { ComponentPropsWithoutRef, ElementType } from 'react';
3
3
  import { TruncateStringProps } from '@snack-uikit/truncate-string';
4
4
  import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
5
5
 
6
- import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
6
+ import { APPEARANCE, PURPOSE, SIZE, TEXT_MODE } from './constants';
7
7
 
8
8
  export type Appearance = ValueOf<typeof APPEARANCE>;
9
9
 
10
10
  export type Size = ValueOf<typeof SIZE>;
11
11
 
12
+ export type Purpose = ValueOf<typeof PURPOSE>;
13
+
12
14
  export type TextMode = ValueOf<typeof TEXT_MODE>;
13
15
 
14
16
  export type BaseProps = WithSupportProps<{
@@ -18,6 +20,10 @@ export type BaseProps = WithSupportProps<{
18
20
  * @default 's'
19
21
  */
20
22
  size?: Size;
23
+ /** Роль
24
+ * @default 'body'
25
+ */
26
+ purpose?: Purpose;
21
27
  /** Стилизует ссылку для размещения на цветном фоне
22
28
  * @default 'primary'
23
29
  */