@snack-uikit/link 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.9.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.8.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -14,11 +14,11 @@
 import { Link } from '@snack-uikit/link';
 
 <Link
-  onSurface={Link.onSurfaces.Accent}
+  onSurface='accent'
   href='https://cloud.ru/'
   text='Link text'
   external={true}
-  onColor={Link.onSurfaces.Primary}
+  onColor='primary'
 />;
 ```
 
@@ -32,13 +32,13 @@ import { Link } from '@snack-uikit/link';
 | text | `string` | - | Текст ссылки |
 | className | `string` | - | CSS-класс |
 | href | `string` | # | Ссылка |
-| target | `HTMLAttributeAnchorTarget` | Target.Blank | HTML-атрибут target |
+| target | `HTMLAttributeAnchorTarget` | _blank | HTML-атрибут target |
 | download | `string` | - | HTML-атрибут download |
 | onClick | `MouseEventHandler<HTMLAnchorElement>` | - | Колбек обработки клика |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
+| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
 | external | `boolean` | - | Ведет ли ссылка на внешний ресурс (добавляет иконку если true) |
-| onColor | enum OnColor: `"invert-neutral"`, `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | OnColor.Primary | Стилизует ссылку для размещения на цветном фоне |
-| onSurface | enum OnSurface: `"background"`, `"decor"`, `"accent"` | OnSurface.Background | Тип поверхности, на которой размещена ссылка |
+| onColor | enum OnColor: `"invert-neutral"`, `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Стилизует ссылку для размещения на цветном фоне |
+| onSurface | enum OnSurface: `"background"`, `"decor"`, `"accent"` | background | Тип поверхности, на которой размещена ссылка |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Link.d.ts

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { OnColor, OnSurface, Size, Target } from './constants';
+import { OnColor, OnSurface, Size } from './types';
 export type LinkProps = WithSupportProps<{
     /** Текст ссылки */
     text?: string;
@@ -25,9 +25,3 @@ export type LinkProps = WithSupportProps<{
 }>;
 /** Компонент ссылка */
 export declare function Link({ text, className, href, target, download, onClick, onSurface, size, external, onColor, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Link {
-    var sizes: typeof Size;
-    var targets: typeof Target;
-    var onColors: typeof OnColor;
-    var onSurfaces: typeof OnSurface;
-}

package/dist/components/Link.js

@@ -14,14 +14,10 @@ import cn from 'classnames';
 import { ArrowLinksSVG } from '@snack-uikit/icons';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { OnColor, OnSurface, Size, Target } from './constants';
+import { ON_COLOR, ON_SURFACE, SIZE } from './constants';
 import styles from './styles.module.css';
 /** Компонент ссылка */
 export function Link(_a) {
-    var { text = '', className, href = '#', target = Target.Blank, download, onClick, onSurface = OnSurface.Background, size = Size.S, external, onColor = OnColor.Primary } = _a, rest = __rest(_a, ["text", "className", "href", "target", "download", "onClick", "onSurface", "size", "external", "onColor"]);
-    return (_jsxs("a", Object.assign({ 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 }, { children: [_jsx(TruncateString, { text: text, maxLines: 1 }), external && _jsx(ArrowLinksSVG, { "data-test-id": 'link__external-icon', className: styles.icon })] })));
+    var { text = '', className, href = '#', target = '_blank', download, onClick, onSurface = ON_SURFACE.Background, size = SIZE.S, external, onColor = ON_COLOR.Primary } = _a, rest = __rest(_a, ["text", "className", "href", "target", "download", "onClick", "onSurface", "size", "external", "onColor"]);
+    return (_jsxs("a", Object.assign({ 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 === '_blank' ? 'noopener noreferrer' : undefined }, { children: [_jsx(TruncateString, { text: text, maxLines: 1 }), external && _jsx(ArrowLinksSVG, { "data-test-id": 'link__external-icon', className: styles.icon })] })));
 }
-Link.sizes = Size;
-Link.targets = Target;
-Link.onColors = OnColor;
-Link.onSurfaces = OnSurface;

package/dist/components/constants.d.ts

@@ -1,28 +1,28 @@
-export declare enum OnColor {
-    InvertNeutral = "invert-neutral",
-    Neutral = "neutral",
-    Primary = "primary",
-    Red = "red",
-    Orange = "orange",
-    Yellow = "yellow",
-    Green = "green",
-    Blue = "blue",
-    Violet = "violet",
-    Pink = "pink"
-}
-export declare enum Size {
-    S = "s",
-    M = "m",
-    L = "l"
-}
-export declare enum Target {
-    Self = "_self",
-    Blank = "_blank",
-    Parent = "_parent",
-    Top = "_top"
-}
-export declare enum OnSurface {
-    Background = "background",
-    Decor = "decor",
-    Accent = "accent"
-}
+export declare const ON_COLOR: {
+    readonly InvertNeutral: "invert-neutral";
+    readonly Neutral: "neutral";
+    readonly Primary: "primary";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const TARGET: {
+    readonly Self: "_self";
+    readonly Blank: "_blank";
+    readonly Parent: "_parent";
+    readonly Top: "_top";
+};
+export declare const ON_SURFACE: {
+    readonly Background: "background";
+    readonly Decor: "decor";
+    readonly Accent: "accent";
+};

package/dist/components/constants.js

@@ -1,32 +1,28 @@
-export var OnColor;
-(function (OnColor) {
-    OnColor["InvertNeutral"] = "invert-neutral";
-    OnColor["Neutral"] = "neutral";
-    OnColor["Primary"] = "primary";
-    OnColor["Red"] = "red";
-    OnColor["Orange"] = "orange";
-    OnColor["Yellow"] = "yellow";
-    OnColor["Green"] = "green";
-    OnColor["Blue"] = "blue";
-    OnColor["Violet"] = "violet";
-    OnColor["Pink"] = "pink";
-})(OnColor || (OnColor = {}));
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-    Size["L"] = "l";
-})(Size || (Size = {}));
-export var Target;
-(function (Target) {
-    Target["Self"] = "_self";
-    Target["Blank"] = "_blank";
-    Target["Parent"] = "_parent";
-    Target["Top"] = "_top";
-})(Target || (Target = {}));
-export var OnSurface;
-(function (OnSurface) {
-    OnSurface["Background"] = "background";
-    OnSurface["Decor"] = "decor";
-    OnSurface["Accent"] = "accent";
-})(OnSurface || (OnSurface = {}));
+export const ON_COLOR = {
+    InvertNeutral: 'invert-neutral',
+    Neutral: 'neutral',
+    Primary: 'primary',
+    Red: 'red',
+    Orange: 'orange',
+    Yellow: 'yellow',
+    Green: 'green',
+    Blue: 'blue',
+    Violet: 'violet',
+    Pink: 'pink',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const TARGET = {
+    Self: '_self',
+    Blank: '_blank',
+    Parent: '_parent',
+    Top: '_top',
+};
+export const ON_SURFACE = {
+    Background: 'background',
+    Decor: 'decor',
+    Accent: 'accent',
+};

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/components/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { ON_COLOR, ON_SURFACE, SIZE } from './constants';
+export type OnColor = ValueOf<typeof ON_COLOR>;
+export type Size = ValueOf<typeof SIZE>;
+export type OnSurface = ValueOf<typeof ON_SURFACE>;

package/dist/components/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Link",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,9 +33,9 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/truncate-string": "0.4.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

package/src/components/Link.tsx

@@ -5,8 +5,9 @@ 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 { ON_COLOR, ON_SURFACE, SIZE } from './constants';
 import styles from './styles.module.scss';
+import { OnColor, OnSurface, Size } from './types';
 
 export type LinkProps = WithSupportProps<{
   /** Текст ссылки */
@@ -36,13 +37,13 @@ export function Link({
   text = '',
   className,
   href = '#',
-  target = Target.Blank,
+  target = '_blank',
   download,
   onClick,
-  onSurface = OnSurface.Background,
-  size = Size.S,
+  onSurface = ON_SURFACE.Background,
+  size = SIZE.S,
   external,
-  onColor = OnColor.Primary,
+  onColor = ON_COLOR.Primary,
   ...rest
 }: LinkProps) {
   return (
@@ -56,15 +57,10 @@ export function Link({
       data-size={size}
       data-on-surface={onSurface}
       data-color={onColor}
-      rel={target === Target.Blank ? 'noopener noreferrer' : undefined}
+      rel={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

@@ -1,31 +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 const ON_COLOR = {
+  InvertNeutral: 'invert-neutral',
+  Neutral: 'neutral',
+  Primary: 'primary',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink',
+} as const;
 
-export enum Size {
-  S = 's',
-  M = 'm',
-  L = 'l',
-}
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
 
-export enum Target {
-  Self = '_self',
-  Blank = '_blank',
-  Parent = '_parent',
-  Top = '_top',
-}
+export const TARGET = {
+  Self: '_self',
+  Blank: '_blank',
+  Parent: '_parent',
+  Top: '_top',
+} as const;
 
-export enum OnSurface {
-  Background = 'background',
-  Decor = 'decor',
-  Accent = 'accent',
-}
+export const ON_SURFACE = {
+  Background: 'background',
+  Decor: 'decor',
+  Accent: 'accent',
+} as const;

package/src/components/index.ts

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

package/src/components/types.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { ON_COLOR, ON_SURFACE, SIZE } from './constants';
+
+export type OnColor = ValueOf<typeof ON_COLOR>;
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type OnSurface = ValueOf<typeof ON_SURFACE>;