@alfalab/core-components 41.5.0 → 41.7.0-beta.0

package/indicator/Component.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactElement } from "react";
+type IndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | ReactElement;
+    /**
+     * Цвет значения
+     */
+    color?: string;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Настройки обводки
+     */
+    border?: {
+        width?: number;
+        color?: string;
+        style?: 'solid' | 'dashed' | 'dotted';
+    };
+    /**
+     * Пресет компонента
+     */
+    view?: 'red' | 'grey' | 'white';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Indicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /**
+     * Цвет значения
+     */
+    color?: string | undefined;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number | undefined;
+    /**
+     * Настройки обводки
+     */
+    border?: {
+        width?: number | undefined;
+        color?: string | undefined;
+        style?: "solid" | "dashed" | "dotted" | undefined;
+    } | undefined;
+    /**
+     * Пресет компонента
+     */
+    view?: "red" | "grey" | "white" | undefined;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { IndicatorProps, Indicator };

package/indicator/Component.js

@@ -0,0 +1,91 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 styles = {"component":"indicator__component_9vw4m","red":"indicator__red_9vw4m","white":"indicator__white_9vw4m","grey":"indicator__grey_9vw4m","xs":"indicator__xs_9vw4m","s":"indicator__s_9vw4m","content":"indicator__content_9vw4m","m":"indicator__m_9vw4m","l":"indicator__l_9vw4m","xl":"indicator__xl_9vw4m","xxl":"indicator__xxl_9vw4m","border":"indicator__border_9vw4m"};
+require('./index.css');
+
+function getSize(height, value) {
+    if (!height) {
+        return typeof value === 'undefined' ? 'xs' : 's';
+    }
+    if (height <= 8)
+        return 'xs';
+    if (height <= 18)
+        return 's';
+    if (height <= 24)
+        return 'm';
+    if (height <= 32)
+        return 'l';
+    if (height <= 40)
+        return 'xl';
+    return 'xxl';
+}
+function formatValue(rawValue) {
+    if (typeof rawValue === 'number' && rawValue >= 100)
+        return '99+';
+    return rawValue;
+}
+var Indicator = React.forwardRef(function (_a, ref) {
+    var value = _a.value, color = _a.color, backgroundColor = _a.backgroundColor, border = _a.border, height = _a.height, view = _a.view, className = _a.className, dataTestId = _a.dataTestId, style = _a.style, restProps = __rest(_a, ["value", "color", "backgroundColor", "border", "height", "view", "className", "dataTestId", "style"]);
+    var size = getSize(height, value);
+    var showContent = typeof value !== 'undefined' && size !== 'xs';
+    return (React__default.default.createElement("div", __assign({ ref: ref, className: cn__default.default(styles.component, view && styles[view], styles[size], className), style: __assign(__assign(__assign({}, style), (!view && {
+            backgroundColor: backgroundColor,
+            color: color,
+        })), { height: height, minWidth: height }), "data-test-id": dataTestId }, restProps),
+        showContent && React__default.default.createElement("span", { className: styles.content }, formatValue(value)),
+        border && (React__default.default.createElement("span", { className: styles.border, style: __assign({}, (!view &&
+                border && {
+                borderColor: border.color,
+                borderWidth: border.width,
+                borderStyle: border.style || 'solid',
+            })) }))));
+});
+
+exports.Indicator = Indicator;

package/indicator/cssm/Component.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactElement } from "react";
+type IndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | ReactElement;
+    /**
+     * Цвет значения
+     */
+    color?: string;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Настройки обводки
+     */
+    border?: {
+        width?: number;
+        color?: string;
+        style?: 'solid' | 'dashed' | 'dotted';
+    };
+    /**
+     * Пресет компонента
+     */
+    view?: 'red' | 'grey' | 'white';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Indicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /**
+     * Цвет значения
+     */
+    color?: string | undefined;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number | undefined;
+    /**
+     * Настройки обводки
+     */
+    border?: {
+        width?: number | undefined;
+        color?: string | undefined;
+        style?: "solid" | "dashed" | "dotted" | undefined;
+    } | undefined;
+    /**
+     * Пресет компонента
+     */
+    view?: "red" | "grey" | "white" | undefined;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { IndicatorProps, Indicator };

package/indicator/cssm/Component.js

@@ -0,0 +1,90 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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;
+}
+
+function getSize(height, value) {
+    if (!height) {
+        return typeof value === 'undefined' ? 'xs' : 's';
+    }
+    if (height <= 8)
+        return 'xs';
+    if (height <= 18)
+        return 's';
+    if (height <= 24)
+        return 'm';
+    if (height <= 32)
+        return 'l';
+    if (height <= 40)
+        return 'xl';
+    return 'xxl';
+}
+function formatValue(rawValue) {
+    if (typeof rawValue === 'number' && rawValue >= 100)
+        return '99+';
+    return rawValue;
+}
+var Indicator = React.forwardRef(function (_a, ref) {
+    var value = _a.value, color = _a.color, backgroundColor = _a.backgroundColor, border = _a.border, height = _a.height, view = _a.view, className = _a.className, dataTestId = _a.dataTestId, style = _a.style, restProps = __rest(_a, ["value", "color", "backgroundColor", "border", "height", "view", "className", "dataTestId", "style"]);
+    var size = getSize(height, value);
+    var showContent = typeof value !== 'undefined' && size !== 'xs';
+    return (React__default.default.createElement("div", __assign({ ref: ref, className: cn__default.default(styles__default.default.component, view && styles__default.default[view], styles__default.default[size], className), style: __assign(__assign(__assign({}, style), (!view && {
+            backgroundColor: backgroundColor,
+            color: color,
+        })), { height: height, minWidth: height }), "data-test-id": dataTestId }, restProps),
+        showContent && React__default.default.createElement("span", { className: styles__default.default.content }, formatValue(value)),
+        border && (React__default.default.createElement("span", { className: styles__default.default.border, style: __assign({}, (!view &&
+                border && {
+                borderColor: border.color,
+                borderWidth: border.width,
+                borderStyle: border.style || 'solid',
+            })) }))));
+});
+
+exports.Indicator = Indicator;

package/indicator/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/indicator/cssm/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('classnames');
+require('./index.module.css');
+
+
+
+exports.Indicator = Component.Indicator;

package/indicator/cssm/index.module.css

@@ -0,0 +1,81 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-accent: #ef3124;
+    --color-light-bg-primary: #fff;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
+    --color-light-text-primary: #0e0e0e;
+    --color-static-text-primary-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-pill: 99px;
+} :root {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+} :root {
+} :root {
+} .component {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    border-radius: var(--border-radius-pill);
+} .red {
+    background-color: var(--color-light-bg-accent);
+    color: var(--color-static-text-primary-light);
+} .white {
+    background-color: var(--color-light-bg-primary);
+    color: var(--color-light-text-primary);
+} .grey {
+    background-color: var(--color-light-specialbg-secondary-transparent);
+    color: var(--color-light-text-primary);
+} .xs {
+    height: 8px;
+    min-width: 8px;
+} .s {
+    height: 20px;
+    min-width: 20px
+} .s .content {
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        padding: 0 var(--gap-2xs);
+    } .m .content {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+        padding: 0 var(--gap-2xs);
+    } .l .content {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+        padding: 0 var(--gap-xs);
+    } .xl .content {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+        padding: 0 var(--gap-s);
+    } .xxl .content {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+        padding: 0 var(--gap-m);
+    } .border {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--border-radius-pill);
+}

package/indicator/esm/Component.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactElement } from "react";
+type IndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | ReactElement;
+    /**
+     * Цвет значения
+     */
+    color?: string;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Настройки обводки
+     */
+    border?: {
+        width?: number;
+        color?: string;
+        style?: 'solid' | 'dashed' | 'dotted';
+    };
+    /**
+     * Пресет компонента
+     */
+    view?: 'red' | 'grey' | 'white';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Indicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /**
+     * Цвет значения
+     */
+    color?: string | undefined;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number | undefined;
+    /**
+     * Настройки обводки
+     */
+    border?: {
+        width?: number | undefined;
+        color?: string | undefined;
+        style?: "solid" | "dashed" | "dotted" | undefined;
+    } | undefined;
+    /**
+     * Пресет компонента
+     */
+    view?: "red" | "grey" | "white" | undefined;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { IndicatorProps, Indicator };

package/indicator/esm/Component.js

@@ -0,0 +1,84 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 styles = {"component":"indicator__component_9vw4m","red":"indicator__red_9vw4m","white":"indicator__white_9vw4m","grey":"indicator__grey_9vw4m","xs":"indicator__xs_9vw4m","s":"indicator__s_9vw4m","content":"indicator__content_9vw4m","m":"indicator__m_9vw4m","l":"indicator__l_9vw4m","xl":"indicator__xl_9vw4m","xxl":"indicator__xxl_9vw4m","border":"indicator__border_9vw4m"};
+require('./index.css');
+
+function getSize(height, value) {
+    if (!height) {
+        return typeof value === 'undefined' ? 'xs' : 's';
+    }
+    if (height <= 8)
+        return 'xs';
+    if (height <= 18)
+        return 's';
+    if (height <= 24)
+        return 'm';
+    if (height <= 32)
+        return 'l';
+    if (height <= 40)
+        return 'xl';
+    return 'xxl';
+}
+function formatValue(rawValue) {
+    if (typeof rawValue === 'number' && rawValue >= 100)
+        return '99+';
+    return rawValue;
+}
+var Indicator = forwardRef(function (_a, ref) {
+    var value = _a.value, color = _a.color, backgroundColor = _a.backgroundColor, border = _a.border, height = _a.height, view = _a.view, className = _a.className, dataTestId = _a.dataTestId, style = _a.style, restProps = __rest(_a, ["value", "color", "backgroundColor", "border", "height", "view", "className", "dataTestId", "style"]);
+    var size = getSize(height, value);
+    var showContent = typeof value !== 'undefined' && size !== 'xs';
+    return (React.createElement("div", __assign({ ref: ref, className: cn(styles.component, view && styles[view], styles[size], className), style: __assign(__assign(__assign({}, style), (!view && {
+            backgroundColor: backgroundColor,
+            color: color,
+        })), { height: height, minWidth: height }), "data-test-id": dataTestId }, restProps),
+        showContent && React.createElement("span", { className: styles.content }, formatValue(value)),
+        border && (React.createElement("span", { className: styles.border, style: __assign({}, (!view &&
+                border && {
+                borderColor: border.color,
+                borderWidth: border.width,
+                borderStyle: border.style || 'solid',
+            })) }))));
+});
+
+export { Indicator };