@snack-uikit/link 0.7.1-preview-85c5f47b.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@snack-uikit/link",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Link",
+  "version": "0.7.1-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "Ссылка, используемая внутри текста",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/link",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/link"
+  },
+  "author": "Anna Kozlova <apkozlova@cloud.ru>",
+  "contributors": [
+    "Anna Kozlova <apkozlova@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/Link.tsx

@@ -0,0 +1,70 @@
+import cn from 'classnames';
+import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
+
+import { ArrowLinksSVG } from '@snack-uikit/icons';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { OnColor, OnSurface, Size, Target } from './constants';
+import styles from './styles.module.scss';
+
+export type LinkProps = WithSupportProps<{
+  /** Текст ссылки */
+  text?: string;
+  /** CSS-класс */
+  className?: string;
+  /** Ссылка */
+  href?: string;
+  /** HTML-атрибут target */
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+  /** HTML-атрибут download */
+  download?: string;
+  /** Колбек обработки клика */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  /** Размер */
+  size?: Size;
+  /** Ведет ли ссылка на внешний ресурс (добавляет иконку если true) */
+  external?: boolean;
+  /** Стилизует ссылку для размещения на цветном фоне */
+  onColor?: OnColor;
+  /** Тип поверхности, на которой размещена ссылка */
+  onSurface?: OnSurface;
+}>;
+
+/** Компонент ссылка */
+export function Link({
+  text = '',
+  className,
+  href = '#',
+  target = Target.Blank,
+  download,
+  onClick,
+  onSurface = OnSurface.Background,
+  size = Size.S,
+  external,
+  onColor = OnColor.Primary,
+  ...rest
+}: LinkProps) {
+  return (
+    <a
+      className={cn(styles.link, className)}
+      href={href}
+      target={target}
+      download={download}
+      onClick={onClick}
+      {...extractSupportProps(rest)}
+      data-size={size}
+      data-on-surface={onSurface}
+      data-color={onColor}
+      rel={target === Target.Blank ? 'noopener noreferrer' : undefined}
+    >
+      <TruncateString text={text} maxLines={1} />
+      {external && <ArrowLinksSVG data-test-id='link__external-icon' className={styles.icon} />}
+    </a>
+  );
+}
+
+Link.sizes = Size;
+Link.targets = Target;
+Link.onColors = OnColor;
+Link.onSurfaces = OnSurface;

package/src/components/constants.ts

@@ -0,0 +1,31 @@
+export enum OnColor {
+  InvertNeutral = 'invert-neutral',
+  Neutral = 'neutral',
+  Primary = 'primary',
+  Red = 'red',
+  Orange = 'orange',
+  Yellow = 'yellow',
+  Green = 'green',
+  Blue = 'blue',
+  Violet = 'violet',
+  Pink = 'pink',
+}
+
+export enum Size {
+  S = 's',
+  M = 'm',
+  L = 'l',
+}
+
+export enum Target {
+  Self = '_self',
+  Blank = '_blank',
+  Parent = '_parent',
+  Top = '_top',
+}
+
+export enum OnSurface {
+  Background = 'background',
+  Decor = 'decor',
+  Accent = 'accent',
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Link';
+export { OnColor } from './constants';

package/src/components/styles.module.scss

@@ -0,0 +1,91 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-link';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm', 'l';
+$colors: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
+$on-surfaces: 'background', 'decor', 'accent';
+$icon-sizes: (
+  's': $icon-xs,
+  'm': $icon-s,
+  'l': $icon-s,
+);
+
+.link {
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+
+  width: fit-content;
+  max-width: 100%;
+
+  text-decoration: none;
+  text-decoration-skip-ink: none;
+
+  @each $on-surface in $on-surfaces {
+    &[data-on-surface='#{$on-surface}'] {
+      @each $color in $colors {
+        &[data-color='#{$color}'] {
+          @if $on-surface == 'accent' {
+            color: simple-var($theme-variables, 'sys', $color, 'on-accent');
+
+            &:hover {
+              color: simple-var($theme-variables, 'sys', $color, 'on-accent');
+              opacity: $opacity-a080;
+            }
+            &:focus-visible {
+              @include outline-var($container-focused-s);
+
+              opacity: $opacity-a080;
+              outline-color: $sys-available-on-complementary;
+            }
+          }
+
+          @else {
+            color: simple-var($theme-variables, 'sys', $color, 'accent-default');
+            
+            &:hover {
+              color: simple-var($theme-variables, 'sys', $color, 'text-main');
+            }
+            &:focus-visible {
+              @include outline-var($container-focused-s);
+
+              color: simple-var($theme-variables, 'sys', $color, 'text-main');
+
+              @if $color == 'invert-neutral' {
+                outline-color: $sys-available-on-complementary;
+              }
+
+              @else {
+                outline-color: $sys-available-complementary;
+              }
+            }
+          }
+
+          @each $size in $sizes {
+            &[data-size='#{$size}'] {
+              @if $on-surface == 'decor' {
+                @include composite-var($theme-variables, 'sans', 'body', $size);
+              }
+
+              @else {
+                @include composite-var($theme-variables, 'link', 'body', $size);
+              }
+
+              @include composite-var($link, 'container', $size);
+
+              svg {
+                width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+                height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';