@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/breakpoints.scss

@@ -1,5 +1,8 @@
+/* stylelint-disable length-zero-no-unit */
 $map: (
-  mxs: 0,
+  // ВАЖНО: тут именно 0px а не 0 - в Safari нельзя использовать @media (min-width: 0)
+  mxs: 0px,
+
   ms: 480px,
   mm: 720px,
   ml: 840px,
@@ -7,8 +10,9 @@ $map: (
   s: 1280px,
   m: 1440px,
   l: 1600px,
-  xl: 1920px,
+  xl: 1920px
 ) !default;
+/* stylelint-enable length-zero-no-unit */
 
 /**
  * ВАЖНО: здесь должны быть только утилиты позволяющие применить стили ">=" либо "<" начала диапазона (breakpoint range).

package/button/button-util.scss

@@ -0,0 +1,55 @@
+@use '../colors';
+
+@mixin size-xs {
+  --button-min-size: 32px;
+  --button-font-size: 14px;
+  --button-line-height: 20px;
+  --button-gutter: 12px;
+}
+
+@mixin size-s {
+  --button-min-size: 40px;
+  --button-font-size: 16px;
+  --button-line-height: 24px;
+  --button-gutter: 20px;
+}
+
+@mixin size-m {
+  --button-min-size: 48px;
+  --button-font-size: 16px;
+  --button-line-height: 24px;
+  --button-gutter: 24px;
+}
+
+@mixin color-primary {
+  --button-color: #fff;
+  --button-background: #{colors.$basic-blue};
+  --button-hover-background: #{colors.$additional-unlit-blue};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}
+
+@mixin color-secondary {
+  --button-color: #{colors.$basic-gray87};
+  --button-background: #{colors.$basic-gray8};
+  --button-hover-background: #{colors.$basic-gray12};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}
+
+@mixin color-success {
+  --button-color: #fff;
+  --button-background: #{colors.$additional-teal};
+  --button-hover-background: #{colors.$additional-dark-teal};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}
+
+@mixin color-info {
+  --button-color: #{colors.$additional-deep-blue};
+  --button-background: #{colors.$additional-sky};
+  --button-hover-color: #{colors.$additional-light-blue};
+  --button-hover-background: #{colors.$additional-sky};
+  --button-disabled-color: #{colors.$basic-gray24};
+  --button-disabled-background: #{colors.$basic-gray8};
+}

package/button/button.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from './types';
+/**
+ * Кнопка - запускает действие.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<any>>;

package/button/button.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const spinner_1 = require("../spinner");
+const bind_1 = __importDefault(require("classnames/bind"));
+const button_m_scss_1 = __importDefault(require("./button.m.scss"));
+const cx = bind_1.default.bind(button_m_scss_1.default);
+/**
+ * Кнопка - запускает действие.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+exports.Button = (0, react_1.forwardRef)(function Button({ viewType = 'primary', icon: Icon, iconPosition = 'start', size = 'm', loading, disabled, className, children, 'data-testid': testId = 'button', ...restProps }, ref) {
+    const hasIcon = Boolean(Icon);
+    const hasText = Boolean(children);
+    const rootClassName = cx('root', `size-${size}`, viewType !== 'unset' && `view-${viewType}`, loading && 'loading', disabled && 'disabled', hasIcon && !hasText && 'icon-only', hasText && hasIcon && iconPosition === 'start' && 'icon-start', hasText && hasIcon && iconPosition === 'end' && 'icon-end', className);
+    const spinnerColor = (0, react_1.useMemo)(() => {
+        if (disabled) {
+            return 'basic-gray38';
+        }
+        switch (viewType) {
+            case 'primary': {
+                return 'basic-white';
+            }
+            case 'secondary': {
+                return 'basic-gray38';
+            }
+            case 'success': {
+                return 'basic-white';
+            }
+            case 'info': {
+                return 'additional-deep-blue';
+            }
+        }
+    }, [disabled, viewType]);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Icon && iconPosition === 'start' && (0, jsx_runtime_1.jsx)(Icon, { className: cx('icon') }), children, Icon && iconPosition === 'end' && (0, jsx_runtime_1.jsx)(Icon, { className: cx('icon') }), loading && (0, jsx_runtime_1.jsx)(spinner_1.SpinnerSVG, { size: 's', color: spinnerColor, className: cx('spinner') })] }));
+    let result = null;
+    if (restProps.appearance === 'container') {
+        result = ((0, jsx_runtime_1.jsx)("div", { ...restProps, ref: ref, className: rootClassName, role: 'button', "data-testid": testId, children: content }));
+    }
+    else if (restProps.appearance === 'link') {
+        result = ((0, jsx_runtime_1.jsx)("a", { ...restProps, ref: ref, className: rootClassName, "data-testid": testId, children: content }));
+    }
+    else {
+        result = ((0, jsx_runtime_1.jsx)("button", { ...restProps, ref: ref, className: rootClassName, disabled: disabled, "data-testid": testId, children: content }));
+    }
+    return result;
+});
+//# sourceMappingURL=button.js.map

package/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"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"}

package/button/{button.module.scss → button.m.scss}

@@ -1,4 +1,5 @@
 @use '../colors';
+@use './button-util';
 
 .root {
   position: relative;
@@ -31,8 +32,8 @@
   &:disabled,
   &.disabled {
     pointer-events: none;
-    color: colors.$basic-gray24;
-    background-color: colors.$basic-gray8;
+    color: var(--button-disabled-color, var(--button-color));
+    background: var(--button-disabled-background, var(--button-background));
   }
   &.loading {
     color: transparent;
@@ -41,28 +42,26 @@
       pointer-events: 0;
     }
   }
+  &:not(:disabled):hover {
+    cursor: pointer;
+    background: var(--button-hover-background, var(--button-background));
+  }
+  &:not(:disabled):not(.loading):hover {
+    color: var(--button-hover-color, var(--button-color));
+  }
 }
 
 // sizes
 .size-xs {
-  --button-min-size: 32px;
-  --button-font-size: 14px;
-  --button-line-height: 20px;
-  --button-gutter: 12px;
+  @include button-util.size-xs;
 }
 
 .size-s {
-  --button-min-size: 40px;
-  --button-font-size: 16px;
-  --button-line-height: 24px;
-  --button-gutter: 20px;
+  @include button-util.size-s;
 }
 
 .size-m {
-  --button-min-size: 48px;
-  --button-font-size: 16px;
-  --button-line-height: 24px;
-  --button-gutter: 24px;
+  @include button-util.size-m;
 }
 
 // content
@@ -82,21 +81,19 @@
 
 // view variants
 .view-primary {
-  --button-background: #{colors.$basic-blue};
-  --button-color: #fff;
-  &:hover:not(:disabled) {
-    cursor: pointer;
-    --button-background: #1b74c1;
-  }
+  @include button-util.color-primary;
 }
 
 .view-secondary {
-  --button-background: #{colors.$basic-gray8};
-  --button-color: #{colors.$basic-gray87};
-  &:hover:not(:disabled) {
-    cursor: pointer;
-    --button-background: #{colors.$basic-gray12};
-  }
+  @include button-util.color-secondary;
+}
+
+.view-success {
+  @include button-util.color-success;
+}
+
+.view-info {
+  @include button-util.color-info;
 }
 
 // icons

package/button/index.d.ts

@@ -1,40 +1,2 @@
-import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, HTMLAttributes, SVGAttributes } from 'react';
-export type ButtonSize = 'xs' | 's' | 'm';
-export type ButtonViewType = 'primary' | 'secondary';
-export type ButtonAppearance = 'button' | 'link' | 'container';
-export type ButtonIconPosition = 'start' | 'end';
-interface CommonProps<T extends ButtonAppearance = ButtonAppearance> {
-    /** Определяет внешний вид кнопки. */
-    viewType?: ButtonViewType;
-    /** Определяет тип корневого элемента. */
-    appearance?: T;
-    /** Иконка. */
-    icon?: ComponentType<SVGAttributes<SVGSVGElement>>;
-    /** Позиция иконки относительно текста. */
-    iconPosition?: ButtonIconPosition;
-    /** Размер. */
-    size?: ButtonSize;
-    /** Нужно ли отображать состояние загрузки. */
-    loading?: boolean;
-    /** Отключенное состояние. */
-    disabled?: boolean;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-type AsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
-    appearance?: 'button';
-};
-type AsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
-    appearance: 'link';
-};
-type AsContainerProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & {
-    appearance: 'container';
-};
-export type ButtonProps = AsButtonProps | AsAnchorProps | AsContainerProps;
-/**
- * Компонент кнопки, стилизованной по дизайн-гайдам.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>;
-export {};
+export type { ButtonSize, ButtonViewType, ButtonAppearance, ButtonStyle, ButtonProps, ButtonIconPosition, } from './types';
+export { Button } from './button';

package/button/index.js

@@ -1,72 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-const react_1 = __importStar(require("react"));
-const spinner_1 = require("../spinner");
-const bind_1 = __importDefault(require("classnames/bind"));
-const button_module_scss_1 = __importDefault(require("./button.module.scss"));
-const cx = bind_1.default.bind(button_module_scss_1.default);
-/**
- * Компонент кнопки, стилизованной по дизайн-гайдам.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
-    var { viewType = 'primary', icon: Icon, iconPosition = 'start', size = 'm', loading, disabled, className, children, 'data-testid': testId = 'button' } = _a, restProps = __rest(_a, ["viewType", "icon", "iconPosition", "size", "loading", "disabled", "className", "children", 'data-testid']);
-    const hasIcon = Boolean(Icon);
-    const hasText = Boolean(children);
-    const rootClassName = cx('root', `size-${size}`, `view-${viewType}`, loading && 'loading', disabled && 'disabled', hasIcon && !hasText && 'icon-only', hasText && hasIcon && iconPosition === 'start' && 'icon-start', hasText && hasIcon && iconPosition === 'end' && 'icon-end', className);
-    const content = (react_1.default.createElement(react_1.default.Fragment, null,
-        Icon && iconPosition === 'start' && react_1.default.createElement(Icon, { className: cx('icon') }),
-        children,
-        Icon && iconPosition === 'end' && react_1.default.createElement(Icon, { className: cx('icon') }),
-        loading && (react_1.default.createElement(spinner_1.SpinnerSVG, { size: 's', color: disabled || viewType === 'secondary' ? 'basic-gray38' : 'basic-white', className: cx('spinner') }))));
-    let result = null;
-    if (restProps.appearance === 'container') {
-        result = (react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: rootClassName, role: 'button', "data-testid": testId }), content));
-    }
-    else if (restProps.appearance === 'link') {
-        result = (react_1.default.createElement("a", Object.assign({}, restProps, { ref: ref, className: rootClassName, "data-testid": testId }), content));
-    }
-    else {
-        result = (react_1.default.createElement("button", Object.assign({}, restProps, { ref: ref, className: rootClassName, disabled: disabled, "data-testid": testId }), content));
-    }
-    return result;
-});
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+//# sourceMappingURL=index.js.map

package/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":";;;AAQA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/button/types.d.ts

@@ -0,0 +1,43 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, ElementType, HTMLAttributes, SVGAttributes } from 'react';
+import type { WithTestId } from '../types';
+export type ButtonSize = 'xs' | 's' | 'm';
+export type ButtonViewType = 'primary' | 'secondary' | 'success' | 'info' | 'unset';
+export type ButtonAppearance = 'button' | 'link' | 'container';
+export type ButtonIconPosition = 'start' | 'end';
+export interface ButtonStyle extends CSSProperties {
+    '--button-color'?: string;
+    '--button-background'?: string;
+    '--button-hover-color'?: string;
+    '--button-hover-background'?: string;
+    '--button-disabled-color'?: string;
+    '--button-disabled-background'?: string;
+}
+interface CommonProps<T extends ButtonAppearance = ButtonAppearance> extends WithTestId {
+    /** Определяет внешний вид кнопки. */
+    viewType?: ButtonViewType;
+    /** Определяет тип корневого элемента. */
+    appearance?: T;
+    /** Иконка. */
+    icon?: ElementType<SVGAttributes<SVGSVGElement>>;
+    /** Позиция иконки относительно текста. */
+    iconPosition?: ButtonIconPosition;
+    /** Размер. */
+    size?: ButtonSize;
+    /** Нужно ли отображать состояние загрузки. */
+    loading?: boolean;
+    /** Отключенное состояние. */
+    disabled?: boolean;
+    /** Стили. */
+    style?: ButtonStyle;
+}
+type AsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    appearance?: 'button';
+};
+type AsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    appearance: 'link';
+};
+type AsContainerProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & {
+    appearance: 'container';
+};
+export type ButtonProps = AsButtonProps | AsAnchorProps | AsContainerProps;
+export {};

package/button/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/button/types.ts"],"names":[],"mappings":""}