@alfalab/core-components 48.16.0-beta.999 → 48.17.0

package/checkbox-group/modern/components/base-checkbox-group/index.css

@@ -40,52 +40,52 @@
     --checkbox-group-error-border-left: 1px solid var(--color-light-status-negative);
 
     /* mobile */
-} .checkbox-group__component_1jnj7 {
+} .checkbox-group__component_vzpra {
     display: flex;
     flex-direction: column;
-} .checkbox-group__error_1jnj7 {
+} .checkbox-group__error_vzpra {
     padding-left: var(--checkbox-group-error-padding-left);
     border-left: var(--checkbox-group-error-border-left)
-} .checkbox-group__error_1jnj7.checkbox-group__tag_1jnj7 {
+} .checkbox-group__error_vzpra.checkbox-group__tag_vzpra {
         padding-left: var(--gap-8);
-    } .checkbox-group__checkboxList_1jnj7 {
+    } .checkbox-group__checkboxList_vzpra {
     display: flex;
-} .checkbox-group__vertical_1jnj7 .checkbox-group__checkboxList_1jnj7 {
+} .checkbox-group__vertical_vzpra .checkbox-group__checkboxList_vzpra {
     flex-direction: column;
     align-items: flex-start;
-} .checkbox-group__vertical_1jnj7 .checkbox-group__checkbox_1jnj7 {
+} .checkbox-group__vertical_vzpra .checkbox-group__checkbox_vzpra {
     margin-bottom: var(--gap-12)
-} .checkbox-group__vertical_1jnj7 .checkbox-group__checkbox_1jnj7:last-child {
+} .checkbox-group__vertical_vzpra .checkbox-group__checkbox_vzpra:last-child {
         margin-bottom: var(--gap-0);
-    } .checkbox-group__horizontal_1jnj7 .checkbox-group__checkboxList_1jnj7 {
+    } .checkbox-group__horizontal_vzpra .checkbox-group__checkboxList_vzpra {
     flex-wrap: wrap;
     margin-bottom: var(--gap-8-neg);
-} .checkbox-group__horizontal_1jnj7 .checkbox-group__checkbox_1jnj7 {
+} .checkbox-group__horizontal_vzpra .checkbox-group__checkbox_vzpra {
     margin-right: var(--gap-24);
     margin-bottom: var(--gap-8);
-} .checkbox-group__horizontal_1jnj7 .checkbox-group__tagLabel_1jnj7 {
+} .checkbox-group__horizontal_vzpra .checkbox-group__tagLabel_vzpra {
     margin-right: var(--gap-8);
-} .checkbox-group__horizontal_1jnj7 .checkbox-group__checkbox_1jnj7:last-child,
-.checkbox-group__horizontal_1jnj7 .checkbox-group__tagLabel_1jnj7:last-child {
+} .checkbox-group__horizontal_vzpra .checkbox-group__checkbox_vzpra:last-child,
+.checkbox-group__horizontal_vzpra .checkbox-group__tagLabel_vzpra:last-child {
     margin-right: var(--gap-0);
-} .checkbox-group__label_1jnj7 {
+} .checkbox-group__label_vzpra {
     margin-bottom: var(--gap-12);
-} .checkbox-group__sub_1jnj7 {
+} .checkbox-group__sub_vzpra {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-12);
-} .checkbox-group__errorMessage_1jnj7 {
+} .checkbox-group__errorMessage_vzpra {
     color: var(--checkbox-group-error-color);
-} .checkbox-group__hint_1jnj7 {
+} .checkbox-group__hint_vzpra {
     color: var(--checkbox-group-hint-color);
-} .checkbox-group__hiddenInput_1jnj7 {
+} .checkbox-group__hiddenInput_vzpra {
     position: absolute;
     z-index: -1;
     top: var(--gap-0);
     left: var(--gap-0);
     opacity: 0;
-} .checkbox-group__tagLabel_1jnj7 {
+} .checkbox-group__tagLabel_vzpra {
     position: relative;
     max-width: 100%;
 }

package/checkbox-group/modern/desktop/Component.desktop.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { BaseCheckboxGroup } from '../components/base-checkbox-group/Component.js';
 import 'classnames';
 
-const styles = {"checkboxList":"checkbox-group__checkboxList_1oqbp","label":"checkbox-group__label_1oqbp","sub":"checkbox-group__sub_1oqbp"};
+const styles = {"checkboxList":"checkbox-group__checkboxList_112i8","label":"checkbox-group__label_112i8","sub":"checkbox-group__sub_112i8"};
 require('./desktop.css');
 
 const CheckboxGroupDesktop = (props) => (React.createElement(BaseCheckboxGroup, { ...props, styles: styles }));

package/checkbox-group/modern/desktop/desktop.css

@@ -29,14 +29,14 @@
     --checkbox-group-list-padding-left: var(--gap-0);
 
     /* mobile */
-} .checkbox-group__checkboxList_1oqbp {
+} .checkbox-group__checkboxList_112i8 {
     padding-left: var(--checkbox-group-list-padding-left);
-} .checkbox-group__label_1oqbp {
+} .checkbox-group__label_112i8 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--checkbox-group-label-color);
     padding-left: var(--checkbox-group-sub-padding-left);
-} .checkbox-group__sub_1oqbp {
+} .checkbox-group__sub_112i8 {
     padding-left: var(--checkbox-group-sub-padding-left);
 }

package/checkbox-group/modern/mobile/Component.mobile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { BaseCheckboxGroup } from '../components/base-checkbox-group/Component.js';
 import 'classnames';
 
-const styles = {"checkboxList":"checkbox-group__checkboxList_1picq","label":"checkbox-group__label_1picq","sub":"checkbox-group__sub_1picq"};
+const styles = {"checkboxList":"checkbox-group__checkboxList_10o33","label":"checkbox-group__label_10o33","sub":"checkbox-group__sub_10o33"};
 require('./mobile.css');
 
 const CheckboxGroupMobile = (props) => (React.createElement(BaseCheckboxGroup, { ...props, styles: styles }));

package/checkbox-group/modern/mobile/mobile.css

@@ -32,14 +32,14 @@
     --checkbox-group-mobile-sub-padding-left: var(--gap-4);
     --checkbox-group-mobile-list-padding-left: var(--gap-2);
     --checkbox-group-mobile-label-color: var(--color-light-text-secondary);
-} .checkbox-group__checkboxList_1picq {
+} .checkbox-group__checkboxList_10o33 {
     padding-left: var(--checkbox-group-mobile-list-padding-left);
-} .checkbox-group__label_1picq {
+} .checkbox-group__label_10o33 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--checkbox-group-mobile-label-color);
     padding-left: var(--checkbox-group-mobile-sub-padding-left);
-} .checkbox-group__sub_1picq {
+} .checkbox-group__sub_10o33 {
     padding-left: var(--checkbox-group-mobile-sub-padding-left);
 }

package/circular-progress-bar/Component.d.ts

@@ -1,12 +1,27 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType, ReactNode } from "react";
-type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+import { ComponentSize } from "./types/component-size";
+import { TypographyColor } from "./types/typography-color";
 type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
      */
-    value: number;
+    value: number | {
+        /**
+         * Время таймера в секундах
+         * Минимальное значение 0
+         * Максимальное значение 3600
+         */
+        timer: number;
+        /**
+         * Направлние отсчета таймера
+         * forward: считаем от 0 до указанного значения
+         * backward: считаем от указанного значения до 0
+         * @default backward
+         */
+        counting?: 'forward' | 'backward';
+    };
     /**
      * Дополнительный класс
      */
@@ -19,6 +34,16 @@ type CircularProgressBarProps = {
      * Цвет контента
      */
     contentColor?: TypographyColor | string;
+    /**
+     * Цвет заголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    titleColor?: TypographyColor | string;
+    /**
+     * Цвет подзаголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    subtitleColor?: TypographyColor | string;
     /**
      * Дополнительный текст
      */
@@ -37,9 +62,10 @@ type CircularProgressBarProps = {
     view?: 'positive' | 'negative';
     /**
      * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
-     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
+     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64, 80, 128, 144 соответственно
+     * @default 64
      */
-    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
+    size?: ComponentSize;
     /**
      * Наличие желоба
      */
@@ -103,9 +129,14 @@ type CircularProgressBarProps = {
      * Цвет желоба
      */
     strokeColor?: string;
+    /**
+     * Направление заполнения круга
+     * @default desc
+     */
+    directionType?: 'asc' | 'desc';
 };
 /**
  * Компонент круглого прогресс бара.
  */
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { TypographyColor, CircularProgressBarProps, CircularProgressBar };
+export { CircularProgressBarProps, CircularProgressBar };

package/circular-progress-bar/Component.js

@@ -3,15 +3,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../shared');
 var coreComponentsTypography = require('../typography');
+var utils_isTypographyColor = require('./utils/is-typography-color.js');
 var consts = require('./consts.js');
+var useTimer = require('./use-timer.js');
 
 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 = {"component":"circular-progress-bar__component_1cf8i","bg-positive":"circular-progress-bar__bg-positive_1cf8i","bg-negative":"circular-progress-bar__bg-negative_1cf8i","svg":"circular-progress-bar__svg_1cf8i","title":"circular-progress-bar__title_1cf8i","subtitle":"circular-progress-bar__subtitle_1cf8i","labelWrapper":"circular-progress-bar__labelWrapper_1cf8i","label":"circular-progress-bar__label_1cf8i","typography":"circular-progress-bar__typography_1cf8i","size-144":"circular-progress-bar__size-144_1cf8i","size-128":"circular-progress-bar__size-128_1cf8i","size-80":"circular-progress-bar__size-80_1cf8i","size-64":"circular-progress-bar__size-64_1cf8i","size-48":"circular-progress-bar__size-48_1cf8i","size-24":"circular-progress-bar__size-24_1cf8i","backgroundCircle":"circular-progress-bar__backgroundCircle_1cf8i","progressCircle":"circular-progress-bar__progressCircle_1cf8i","positive":"circular-progress-bar__positive_1cf8i","negative":"circular-progress-bar__negative_1cf8i","stroke":"circular-progress-bar__stroke_1cf8i","iconWrapper":"circular-progress-bar__iconWrapper_1cf8i","icon-tertiary":"circular-progress-bar__icon-tertiary_1cf8i","icon-positive":"circular-progress-bar__icon-positive_1cf8i","icon-negative":"circular-progress-bar__icon-negative_1cf8i","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1cf8i","icon-primary":"circular-progress-bar__icon-primary_1cf8i","icon-secondary":"circular-progress-bar__icon-secondary_1cf8i","icon":"circular-progress-bar__icon_1cf8i"};
+var styles = {"component":"circular-progress-bar__component_17fnq","bg-positive":"circular-progress-bar__bg-positive_17fnq","bg-negative":"circular-progress-bar__bg-negative_17fnq","svg":"circular-progress-bar__svg_17fnq","title":"circular-progress-bar__title_17fnq","subtitle":"circular-progress-bar__subtitle_17fnq","labelWrapper":"circular-progress-bar__labelWrapper_17fnq","label":"circular-progress-bar__label_17fnq","typography":"circular-progress-bar__typography_17fnq","size-144":"circular-progress-bar__size-144_17fnq","size-128":"circular-progress-bar__size-128_17fnq","size-96":"circular-progress-bar__size-96_17fnq","size-80":"circular-progress-bar__size-80_17fnq","size-64":"circular-progress-bar__size-64_17fnq","size-48":"circular-progress-bar__size-48_17fnq","size-24":"circular-progress-bar__size-24_17fnq","backgroundCircle":"circular-progress-bar__backgroundCircle_17fnq","progressCircle":"circular-progress-bar__progressCircle_17fnq","positive":"circular-progress-bar__positive_17fnq","negative":"circular-progress-bar__negative_17fnq","stroke":"circular-progress-bar__stroke_17fnq","iconWrapper":"circular-progress-bar__iconWrapper_17fnq","icon-tertiary":"circular-progress-bar__icon-tertiary_17fnq","icon-positive":"circular-progress-bar__icon-positive_17fnq","icon-negative":"circular-progress-bar__icon-negative_17fnq","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_17fnq","icon-primary":"circular-progress-bar__icon-primary_17fnq","icon-secondary":"circular-progress-bar__icon-secondary_17fnq","icon":"circular-progress-bar__icon_17fnq"};
 require('./index.css');
 
 /**
@@ -19,7 +22,21 @@ require('./index.css');
  */
 var CircularProgressBar = function (_a) {
     var _b, _c, _d;
-    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 64 : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor;
+    var _e;
+    var valueFromProps = _a.value, _f = _a.view, view = _f === void 0 ? 'positive' : _f, _g = _a.size, size = _g === void 0 ? 64 : _g, className = _a.className, dataTestId = _a.dataTestId, _h = _a.title, titleFromProps = _h === void 0 ? coreComponentsShared.isObject(valueFromProps) ? null : "".concat(valueFromProps) : _h, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _j = _a.contentColor, contentColor = _j === void 0 ? 'secondary' : _j, subtitleComplete = _a.subtitleComplete, _k = _a.stroke, stroke = _k === void 0 ? true : _k, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _l = _a.completeIconColor, completeIconColor = _l === void 0 ? 'tertiary' : _l, _m = _a.direction, direction = _m === void 0 ? 'clockwise' : _m, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor, _o = _a.directionType, directionType = _o === void 0 ? 'asc' : _o, titleColor = _a.titleColor, subtitleColor = _a.subtitleColor;
+    var isTimer = coreComponentsShared.isObject(valueFromProps);
+    var _p = useTimer.useTimer(isTimer ? Math.min(Math.max(valueFromProps.timer, consts.MIN_TIMER_VALUE), consts.MAX_TIMER_VALUE) : -1, isTimer, isTimer ? (_e = valueFromProps.counting) !== null && _e !== void 0 ? _e : 'backward' : 'backward'), timerValue = _p[0], timerTitle = _p[1];
+    var value;
+    var title;
+    if (isTimer) {
+        value = timerValue;
+        title = timerTitle;
+    }
+    else {
+        value = valueFromProps;
+        title = titleFromProps;
+    }
+    value = directionType === 'desc' ? consts.MAX_PROGRESS_VALUE - value : value;
     var memorized = React.useMemo(function () {
         var strokeWidth = consts.STROKE[size];
         var maxProgress = 100;
@@ -40,7 +57,7 @@ var CircularProgressBar = function (_a) {
             strokeDasharray: strokeDasharray,
             strokeDashoffset: strokeDashoffset,
         };
-    }, [value, size]);
+    }, [size, value]);
     var isComplete = value === 100;
     var isCompleteTextColor = isComplete && completeTextColor;
     var titleContent = titleComplete && isComplete ? titleComplete : title;
@@ -49,12 +66,30 @@ var CircularProgressBar = function (_a) {
     var typographyContentColor = consts.TYPOGRAPHY_COLOR.includes(contentColor)
         ? contentColor
         : undefined;
+    var getTextColor = function (color) {
+        if (isCompleteTextColor) {
+            return completeTextColor;
+        }
+        if (color) {
+            return utils_isTypographyColor.isTypographyColor(color) ? color : undefined;
+        }
+        return typographyContentColor;
+    };
+    var getTextStyleColor = function (color) {
+        if (color) {
+            if (!utils_isTypographyColor.isTypographyColor(color)) {
+                return { color: color };
+            }
+            return {};
+        }
+        return tslib.__assign({}, (!typographyContentColor && { color: contentColor }));
+    };
     var renderTitleString = function () {
-        return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
+        return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(styles.typography, styles.title), color: getTextColor(titleColor), tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'title') }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Text, { className: styles.title, color: getTextColor(titleColor), tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'title') }, titleContent));
     };
     var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
     var renderSubTitle = function () {
-        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
+        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className: styles.subtitle, color: getTextColor(subtitleColor), view: 'primary-small', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'subtitle'), style: tslib.__assign({}, getTextStyleColor(subtitleColor)) }, subtitleContent)) : (subtitleContent);
     };
     var renderIcon = function () {
         var _a;
@@ -73,10 +108,10 @@ var CircularProgressBar = function (_a) {
         React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
             React__default.default.createElement("circle", { className: cn__default.default(styles.backgroundCircle, styles[consts.SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
                     _c[styles.stroke] = !stroke,
-                    _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
+                    _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-bar') }),
             React__default.default.createElement("circle", { className: cn__default.default(styles.progressCircle, styles[view], styles[consts.SIZE_TO_CLASSNAME_MAP[size]]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
                     ? -memorized.strokeDashoffset
-                    : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
+                    : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")"), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-value') })),
         React__default.default.createElement("div", { className: cn__default.default(styles.labelWrapper, (_d = {},
                 _d[styles.label] = Icon || IconComplete,
                 _d)) }, children || renderContent())));

package/circular-progress-bar/consts.d.ts

@@ -9,6 +9,7 @@ declare const SIZES: {
     48: number;
     64: number;
     80: number;
+    96: number;
     128: number;
     144: number;
 };
@@ -23,6 +24,7 @@ declare const STROKE: {
     48: number;
     64: number;
     80: number;
+    96: number;
     128: number;
     144: number;
 };
@@ -37,6 +39,7 @@ declare const VIEW_TITLE: {
     readonly 48: "small";
     readonly 64: "small";
     readonly 80: "xsmall";
+    readonly 96: "xsmall";
     readonly 128: "medium";
     readonly 144: "medium";
 };
@@ -51,6 +54,7 @@ declare const VIEW_TEXT: {
     readonly 48: "secondary-small";
     readonly 64: "secondary-large";
     readonly 80: "secondary-large";
+    readonly 96: "secondary-large";
     readonly 128: "secondary-large";
     readonly 144: "secondary-large";
 };
@@ -66,7 +70,11 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     48: string;
     64: string;
     80: string;
+    96: string;
     128: string;
     144: string;
 };
-export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };
+declare const MAX_PROGRESS_VALUE = 100;
+declare const MIN_TIMER_VALUE = 0;
+declare const MAX_TIMER_VALUE = 3599;
+export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, MAX_PROGRESS_VALUE, MIN_TIMER_VALUE, MAX_TIMER_VALUE };

package/circular-progress-bar/consts.js

@@ -11,6 +11,7 @@ var SIZES = {
     48: 48,
     64: 64,
     80: 80,
+    96: 96,
     128: 128,
     144: 144,
 };
@@ -25,6 +26,7 @@ var STROKE = {
     48: 4,
     64: 6,
     80: 8,
+    96: 8,
     128: 10,
     144: 12,
 };
@@ -39,6 +41,7 @@ var VIEW_TITLE = {
     48: 'small',
     64: 'small',
     80: 'xsmall',
+    96: 'xsmall',
     128: 'medium',
     144: 'medium',
 };
@@ -53,6 +56,7 @@ var VIEW_TEXT = {
     48: 'secondary-small',
     64: 'secondary-large',
     80: 'secondary-large',
+    96: 'secondary-large',
     128: 'secondary-large',
     144: 'secondary-large',
 };
@@ -68,10 +72,17 @@ var SIZE_TO_CLASSNAME_MAP = {
     48: 'size-48',
     64: 'size-64',
     80: 'size-80',
+    96: 'size-96',
     128: 'size-128',
     144: 'size-144',
 };
+var MAX_PROGRESS_VALUE = 100;
+var MIN_TIMER_VALUE = 0;
+var MAX_TIMER_VALUE = 3599;
 
+exports.MAX_PROGRESS_VALUE = MAX_PROGRESS_VALUE;
+exports.MAX_TIMER_VALUE = MAX_TIMER_VALUE;
+exports.MIN_TIMER_VALUE = MIN_TIMER_VALUE;
 exports.SIZES = SIZES;
 exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
 exports.STROKE = STROKE;

package/circular-progress-bar/cssm/Component.d.ts

@@ -1,12 +1,27 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType, ReactNode } from "react";
-type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+import { ComponentSize } from "./types/component-size";
+import { TypographyColor } from "./types/typography-color";
 type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
      */
-    value: number;
+    value: number | {
+        /**
+         * Время таймера в секундах
+         * Минимальное значение 0
+         * Максимальное значение 3600
+         */
+        timer: number;
+        /**
+         * Направлние отсчета таймера
+         * forward: считаем от 0 до указанного значения
+         * backward: считаем от указанного значения до 0
+         * @default backward
+         */
+        counting?: 'forward' | 'backward';
+    };
     /**
      * Дополнительный класс
      */
@@ -19,6 +34,16 @@ type CircularProgressBarProps = {
      * Цвет контента
      */
     contentColor?: TypographyColor | string;
+    /**
+     * Цвет заголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    titleColor?: TypographyColor | string;
+    /**
+     * Цвет подзаголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    subtitleColor?: TypographyColor | string;
     /**
      * Дополнительный текст
      */
@@ -37,9 +62,10 @@ type CircularProgressBarProps = {
     view?: 'positive' | 'negative';
     /**
      * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
-     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
+     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64, 80, 128, 144 соответственно
+     * @default 64
      */
-    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
+    size?: ComponentSize;
     /**
      * Наличие желоба
      */
@@ -103,9 +129,14 @@ type CircularProgressBarProps = {
      * Цвет желоба
      */
     strokeColor?: string;
+    /**
+     * Направление заполнения круга
+     * @default desc
+     */
+    directionType?: 'asc' | 'desc';
 };
 /**
  * Компонент круглого прогресс бара.
  */
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { TypographyColor, CircularProgressBarProps, CircularProgressBar };
+export { CircularProgressBarProps, CircularProgressBar };

package/circular-progress-bar/cssm/Component.js

@@ -3,8 +3,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../shared/cssm');
 var coreComponentsTypography = require('../../typography/cssm');
+var utils_isTypographyColor = require('./utils/is-typography-color.js');
 var consts = require('./consts.js');
+var useTimer = require('./use-timer.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -18,7 +21,21 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
  */
 var CircularProgressBar = function (_a) {
     var _b, _c, _d;
-    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 64 : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor;
+    var _e;
+    var valueFromProps = _a.value, _f = _a.view, view = _f === void 0 ? 'positive' : _f, _g = _a.size, size = _g === void 0 ? 64 : _g, className = _a.className, dataTestId = _a.dataTestId, _h = _a.title, titleFromProps = _h === void 0 ? coreComponentsShared.isObject(valueFromProps) ? null : "".concat(valueFromProps) : _h, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _j = _a.contentColor, contentColor = _j === void 0 ? 'secondary' : _j, subtitleComplete = _a.subtitleComplete, _k = _a.stroke, stroke = _k === void 0 ? true : _k, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _l = _a.completeIconColor, completeIconColor = _l === void 0 ? 'tertiary' : _l, _m = _a.direction, direction = _m === void 0 ? 'clockwise' : _m, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor, _o = _a.directionType, directionType = _o === void 0 ? 'asc' : _o, titleColor = _a.titleColor, subtitleColor = _a.subtitleColor;
+    var isTimer = coreComponentsShared.isObject(valueFromProps);
+    var _p = useTimer.useTimer(isTimer ? Math.min(Math.max(valueFromProps.timer, consts.MIN_TIMER_VALUE), consts.MAX_TIMER_VALUE) : -1, isTimer, isTimer ? (_e = valueFromProps.counting) !== null && _e !== void 0 ? _e : 'backward' : 'backward'), timerValue = _p[0], timerTitle = _p[1];
+    var value;
+    var title;
+    if (isTimer) {
+        value = timerValue;
+        title = timerTitle;
+    }
+    else {
+        value = valueFromProps;
+        title = titleFromProps;
+    }
+    value = directionType === 'desc' ? consts.MAX_PROGRESS_VALUE - value : value;
     var memorized = React.useMemo(function () {
         var strokeWidth = consts.STROKE[size];
         var maxProgress = 100;
@@ -39,7 +56,7 @@ var CircularProgressBar = function (_a) {
             strokeDasharray: strokeDasharray,
             strokeDashoffset: strokeDashoffset,
         };
-    }, [value, size]);
+    }, [size, value]);
     var isComplete = value === 100;
     var isCompleteTextColor = isComplete && completeTextColor;
     var titleContent = titleComplete && isComplete ? titleComplete : title;
@@ -48,12 +65,30 @@ var CircularProgressBar = function (_a) {
     var typographyContentColor = consts.TYPOGRAPHY_COLOR.includes(contentColor)
         ? contentColor
         : undefined;
+    var getTextColor = function (color) {
+        if (isCompleteTextColor) {
+            return completeTextColor;
+        }
+        if (color) {
+            return utils_isTypographyColor.isTypographyColor(color) ? color : undefined;
+        }
+        return typographyContentColor;
+    };
+    var getTextStyleColor = function (color) {
+        if (color) {
+            if (!utils_isTypographyColor.isTypographyColor(color)) {
+                return { color: color };
+            }
+            return {};
+        }
+        return tslib.__assign({}, (!typographyContentColor && { color: contentColor }));
+    };
     var renderTitleString = function () {
-        return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Text, { className: styles__default.default.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
+        return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: getTextColor(titleColor), tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'title') }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Text, { className: styles__default.default.title, color: getTextColor(titleColor), tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'title') }, titleContent));
     };
     var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
     var renderSubTitle = function () {
-        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className: styles__default.default.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
+        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className: styles__default.default.subtitle, color: getTextColor(subtitleColor), view: 'primary-small', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'subtitle'), style: tslib.__assign({}, getTextStyleColor(subtitleColor)) }, subtitleContent)) : (subtitleContent);
     };
     var renderIcon = function () {
         var _a;
@@ -72,10 +107,10 @@ var CircularProgressBar = function (_a) {
         React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles__default.default.svg, xmlns: 'http://www.w3.org/2000/svg' },
             React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
                     _c[styles__default.default.stroke] = !stroke,
-                    _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
+                    _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-bar') }),
             React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.progressCircle, styles__default.default[view], styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
                     ? -memorized.strokeDashoffset
-                    : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
+                    : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")"), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-value') })),
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.labelWrapper, (_d = {},
                 _d[styles__default.default.label] = Icon || IconComplete,
                 _d)) }, children || renderContent())));

package/circular-progress-bar/cssm/consts.d.ts

@@ -9,6 +9,7 @@ declare const SIZES: {
     48: number;
     64: number;
     80: number;
+    96: number;
     128: number;
     144: number;
 };
@@ -23,6 +24,7 @@ declare const STROKE: {
     48: number;
     64: number;
     80: number;
+    96: number;
     128: number;
     144: number;
 };
@@ -37,6 +39,7 @@ declare const VIEW_TITLE: {
     readonly 48: "small";
     readonly 64: "small";
     readonly 80: "xsmall";
+    readonly 96: "xsmall";
     readonly 128: "medium";
     readonly 144: "medium";
 };
@@ -51,6 +54,7 @@ declare const VIEW_TEXT: {
     readonly 48: "secondary-small";
     readonly 64: "secondary-large";
     readonly 80: "secondary-large";
+    readonly 96: "secondary-large";
     readonly 128: "secondary-large";
     readonly 144: "secondary-large";
 };
@@ -66,7 +70,11 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     48: string;
     64: string;
     80: string;
+    96: string;
     128: string;
     144: string;
 };
-export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };
+declare const MAX_PROGRESS_VALUE = 100;
+declare const MIN_TIMER_VALUE = 0;
+declare const MAX_TIMER_VALUE = 3599;
+export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, MAX_PROGRESS_VALUE, MIN_TIMER_VALUE, MAX_TIMER_VALUE };