@alfalab/core-components-circular-progress-bar 3.4.3 → 3.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/Component.d.ts +2 -1
  2. package/Component.js +6 -6
  3. package/consts.d.ts +39 -1
  4. package/consts.js +39 -0
  5. package/cssm/Component.d.ts +2 -1
  6. package/cssm/Component.js +5 -5
  7. package/cssm/consts.d.ts +39 -1
  8. package/cssm/consts.js +39 -0
  9. package/cssm/index.module.css +26 -26
  10. package/esm/Component.d.ts +2 -1
  11. package/esm/Component.js +7 -7
  12. package/esm/consts.d.ts +39 -1
  13. package/esm/consts.js +39 -1
  14. package/esm/index.css +52 -52
  15. package/index.css +52 -52
  16. package/modern/Component.d.ts +2 -1
  17. package/modern/Component.js +7 -7
  18. package/modern/consts.d.ts +39 -1
  19. package/modern/consts.js +39 -1
  20. package/modern/index.css +52 -52
  21. package/package.json +2 -2
  22. package/src/Component.tsx +19 -7
  23. package/src/consts.ts +39 -0
  24. package/src/index.module.css +12 -12
package/Component.d.ts CHANGED
@@ -37,8 +37,9 @@ type CircularProgressBarProps = {
37
37
  view?: 'positive' | 'negative';
38
38
  /**
39
39
  * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
40
+ * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
40
41
  */
41
- size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
42
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
42
43
  /**
43
44
  * Наличие желоба
44
45
  */
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"circular-progress-bar__component_1ckn0","bg-positive":"circular-progress-bar__bg-positive_1ckn0","bg-negative":"circular-progress-bar__bg-negative_1ckn0","svg":"circular-progress-bar__svg_1ckn0","title":"circular-progress-bar__title_1ckn0","subtitle":"circular-progress-bar__subtitle_1ckn0","labelWrapper":"circular-progress-bar__labelWrapper_1ckn0","label":"circular-progress-bar__label_1ckn0","typography":"circular-progress-bar__typography_1ckn0","xxl":"circular-progress-bar__xxl_1ckn0","xl":"circular-progress-bar__xl_1ckn0","l":"circular-progress-bar__l_1ckn0","m":"circular-progress-bar__m_1ckn0","s":"circular-progress-bar__s_1ckn0","xs":"circular-progress-bar__xs_1ckn0","backgroundCircle":"circular-progress-bar__backgroundCircle_1ckn0","progressCircle":"circular-progress-bar__progressCircle_1ckn0","positive":"circular-progress-bar__positive_1ckn0","negative":"circular-progress-bar__negative_1ckn0","stroke":"circular-progress-bar__stroke_1ckn0","iconWrapper":"circular-progress-bar__iconWrapper_1ckn0","icon-tertiary":"circular-progress-bar__icon-tertiary_1ckn0","icon-positive":"circular-progress-bar__icon-positive_1ckn0","icon-negative":"circular-progress-bar__icon-negative_1ckn0","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1ckn0","icon-primary":"circular-progress-bar__icon-primary_1ckn0","icon-secondary":"circular-progress-bar__icon-secondary_1ckn0","icon":"circular-progress-bar__icon_1ckn0"};
16
+ var styles = {"component":"circular-progress-bar__component_ath2v","bg-positive":"circular-progress-bar__bg-positive_ath2v","bg-negative":"circular-progress-bar__bg-negative_ath2v","svg":"circular-progress-bar__svg_ath2v","title":"circular-progress-bar__title_ath2v","subtitle":"circular-progress-bar__subtitle_ath2v","labelWrapper":"circular-progress-bar__labelWrapper_ath2v","label":"circular-progress-bar__label_ath2v","typography":"circular-progress-bar__typography_ath2v","size-144":"circular-progress-bar__size-144_ath2v","size-128":"circular-progress-bar__size-128_ath2v","size-80":"circular-progress-bar__size-80_ath2v","size-64":"circular-progress-bar__size-64_ath2v","size-48":"circular-progress-bar__size-48_ath2v","size-24":"circular-progress-bar__size-24_ath2v","backgroundCircle":"circular-progress-bar__backgroundCircle_ath2v","progressCircle":"circular-progress-bar__progressCircle_ath2v","positive":"circular-progress-bar__positive_ath2v","negative":"circular-progress-bar__negative_ath2v","stroke":"circular-progress-bar__stroke_ath2v","iconWrapper":"circular-progress-bar__iconWrapper_ath2v","icon-tertiary":"circular-progress-bar__icon-tertiary_ath2v","icon-positive":"circular-progress-bar__icon-positive_ath2v","icon-negative":"circular-progress-bar__icon-negative_ath2v","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_ath2v","icon-primary":"circular-progress-bar__icon-primary_ath2v","icon-secondary":"circular-progress-bar__icon-secondary_ath2v","icon":"circular-progress-bar__icon_ath2v"};
17
17
  require('./index.css')
18
18
 
19
19
  /**
@@ -21,7 +21,7 @@ require('./index.css')
21
21
  */
22
22
  var CircularProgressBar = function (_a) {
23
23
  var _b, _c, _d;
24
- var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _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;
24
+ 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;
25
25
  var memorized = React.useMemo(function () {
26
26
  var strokeWidth = consts.STROKE[size];
27
27
  var maxProgress = 100;
@@ -60,7 +60,7 @@ var CircularProgressBar = function (_a) {
60
60
  };
61
61
  var renderIcon = function () {
62
62
  var _a;
63
- return (React__default.default.createElement("span", { className: cn__default.default(styles.iconWrapper, styles[size], styles.tertiary, styles["icon-".concat(contentColor)], (_a = {},
63
+ return (React__default.default.createElement("span", { className: cn__default.default(styles.iconWrapper, styles[consts.SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles["icon-".concat(contentColor)], (_a = {},
64
64
  _a[styles["icon-".concat(completeIconColor)]] = completeIconColor,
65
65
  _a)) }, IconComponent && React__default.default.createElement(IconComponent, { className: styles.icon })));
66
66
  };
@@ -69,14 +69,14 @@ var CircularProgressBar = function (_a) {
69
69
  consts.SIZES[size] > 24 && renderTitle(),
70
70
  consts.SIZES[size] > 64 && renderSubTitle()));
71
71
  };
72
- return (React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[size], className, (_b = {},
72
+ return (React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[consts.SIZE_TO_CLASSNAME_MAP[size]], className, (_b = {},
73
73
  _b[styles["bg-".concat(view)]] = fillComplete && isComplete,
74
74
  _b)), style: tslib.__assign(tslib.__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
75
75
  React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
76
- React__default.default.createElement("circle", { className: cn__default.default(styles.backgroundCircle, styles[size], (_c = {},
76
+ React__default.default.createElement("circle", { className: cn__default.default(styles.backgroundCircle, styles[consts.SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
77
77
  _c[styles.stroke] = !stroke,
78
78
  _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
79
- React__default.default.createElement("circle", { className: cn__default.default(styles.progressCircle, styles[view], styles[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'
79
+ 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'
80
80
  ? -memorized.strokeDashoffset
81
81
  : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
82
82
  React__default.default.createElement("div", { className: cn__default.default(styles.labelWrapper, (_d = {},
package/consts.d.ts CHANGED
@@ -5,6 +5,12 @@ declare const SIZES: {
5
5
  l: number;
6
6
  xl: number;
7
7
  xxl: number;
8
+ 24: number;
9
+ 48: number;
10
+ 64: number;
11
+ 80: number;
12
+ 128: number;
13
+ 144: number;
8
14
  };
9
15
  declare const STROKE: {
10
16
  xs: number;
@@ -13,6 +19,12 @@ declare const STROKE: {
13
19
  l: number;
14
20
  xl: number;
15
21
  xxl: number;
22
+ 24: number;
23
+ 48: number;
24
+ 64: number;
25
+ 80: number;
26
+ 128: number;
27
+ 144: number;
16
28
  };
17
29
  declare const VIEW_TITLE: {
18
30
  readonly xs: "small";
@@ -21,6 +33,12 @@ declare const VIEW_TITLE: {
21
33
  readonly l: "xsmall";
22
34
  readonly xl: "medium";
23
35
  readonly xxl: "medium";
36
+ readonly 24: "small";
37
+ readonly 48: "small";
38
+ readonly 64: "small";
39
+ readonly 80: "xsmall";
40
+ readonly 128: "medium";
41
+ readonly 144: "medium";
24
42
  };
25
43
  declare const VIEW_TEXT: {
26
44
  readonly xs: "secondary-small";
@@ -29,6 +47,26 @@ declare const VIEW_TEXT: {
29
47
  readonly l: "secondary-large";
30
48
  readonly xl: "secondary-large";
31
49
  readonly xxl: "secondary-large";
50
+ readonly 24: "secondary-small";
51
+ readonly 48: "secondary-small";
52
+ readonly 64: "secondary-large";
53
+ readonly 80: "secondary-large";
54
+ readonly 128: "secondary-large";
55
+ readonly 144: "secondary-large";
32
56
  };
33
57
  declare const TYPOGRAPHY_COLOR: string[];
34
- export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };
58
+ declare const SIZE_TO_CLASSNAME_MAP: {
59
+ xs: string;
60
+ s: string;
61
+ m: string;
62
+ l: string;
63
+ xl: string;
64
+ xxl: string;
65
+ 24: string;
66
+ 48: string;
67
+ 64: string;
68
+ 80: string;
69
+ 128: string;
70
+ 144: string;
71
+ };
72
+ export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };
package/consts.js CHANGED
@@ -9,6 +9,12 @@ var SIZES = {
9
9
  l: 80,
10
10
  xl: 128,
11
11
  xxl: 144,
12
+ 24: 24,
13
+ 48: 48,
14
+ 64: 64,
15
+ 80: 80,
16
+ 128: 128,
17
+ 144: 144,
12
18
  };
13
19
  var STROKE = {
14
20
  xs: 4,
@@ -17,6 +23,12 @@ var STROKE = {
17
23
  l: 8,
18
24
  xl: 10,
19
25
  xxl: 12,
26
+ 24: 4,
27
+ 48: 4,
28
+ 64: 6,
29
+ 80: 8,
30
+ 128: 10,
31
+ 144: 12,
20
32
  };
21
33
  var VIEW_TITLE = {
22
34
  xs: 'small',
@@ -25,6 +37,12 @@ var VIEW_TITLE = {
25
37
  l: 'xsmall',
26
38
  xl: 'medium',
27
39
  xxl: 'medium',
40
+ 24: 'small',
41
+ 48: 'small',
42
+ 64: 'small',
43
+ 80: 'xsmall',
44
+ 128: 'medium',
45
+ 144: 'medium',
28
46
  };
29
47
  var VIEW_TEXT = {
30
48
  xs: 'secondary-small',
@@ -33,10 +51,31 @@ var VIEW_TEXT = {
33
51
  l: 'secondary-large',
34
52
  xl: 'secondary-large',
35
53
  xxl: 'secondary-large',
54
+ 24: 'secondary-small',
55
+ 48: 'secondary-small',
56
+ 64: 'secondary-large',
57
+ 80: 'secondary-large',
58
+ 128: 'secondary-large',
59
+ 144: 'secondary-large',
36
60
  };
37
61
  var TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
62
+ var SIZE_TO_CLASSNAME_MAP = {
63
+ xs: 'size-24',
64
+ s: 'size-48',
65
+ m: 'size-64',
66
+ l: 'size-80',
67
+ xl: 'size-128',
68
+ xxl: 'size-144',
69
+ 24: 'size-24',
70
+ 48: 'size-48',
71
+ 64: 'size-64',
72
+ 80: 'size-80',
73
+ 128: 'size-128',
74
+ 144: 'size-144',
75
+ };
38
76
 
39
77
  exports.SIZES = SIZES;
78
+ exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
40
79
  exports.STROKE = STROKE;
41
80
  exports.TYPOGRAPHY_COLOR = TYPOGRAPHY_COLOR;
42
81
  exports.VIEW_TEXT = VIEW_TEXT;
package/cssm/Component.d.ts CHANGED
@@ -37,8 +37,9 @@ type CircularProgressBarProps = {
37
37
  view?: 'positive' | 'negative';
38
38
  /**
39
39
  * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
40
+ * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
40
41
  */
41
- size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
42
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
42
43
  /**
43
44
  * Наличие желоба
44
45
  */
package/cssm/Component.js CHANGED
@@ -20,7 +20,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
20
20
  */
21
21
  var CircularProgressBar = function (_a) {
22
22
  var _b, _c, _d;
23
- var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _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;
23
+ 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;
24
24
  var memorized = React.useMemo(function () {
25
25
  var strokeWidth = consts.STROKE[size];
26
26
  var maxProgress = 100;
@@ -59,7 +59,7 @@ var CircularProgressBar = function (_a) {
59
59
  };
60
60
  var renderIcon = function () {
61
61
  var _a;
62
- return (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[size], styles__default.default.tertiary, styles__default.default["icon-".concat(contentColor)], (_a = {},
62
+ return (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], styles__default.default.tertiary, styles__default.default["icon-".concat(contentColor)], (_a = {},
63
63
  _a[styles__default.default["icon-".concat(completeIconColor)]] = completeIconColor,
64
64
  _a)) }, IconComponent && React__default.default.createElement(IconComponent, { className: styles__default.default.icon })));
65
65
  };
@@ -68,14 +68,14 @@ var CircularProgressBar = function (_a) {
68
68
  consts.SIZES[size] > 24 && renderTitle(),
69
69
  consts.SIZES[size] > 64 && renderSubTitle()));
70
70
  };
71
- return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], className, (_b = {},
71
+ return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], className, (_b = {},
72
72
  _b[styles__default.default["bg-".concat(view)]] = fillComplete && isComplete,
73
73
  _b)), style: tslib.__assign(tslib.__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
74
74
  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' },
75
- React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[size], (_c = {},
75
+ React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
76
76
  _c[styles__default.default.stroke] = !stroke,
77
77
  _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
78
- React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.progressCircle, styles__default.default[view], styles__default.default[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'
78
+ 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'
79
79
  ? -memorized.strokeDashoffset
80
80
  : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
81
81
  React__default.default.createElement("div", { className: cn__default.default(styles__default.default.labelWrapper, (_d = {},
package/cssm/consts.d.ts CHANGED
@@ -5,6 +5,12 @@ declare const SIZES: {
5
5
  l: number;
6
6
  xl: number;
7
7
  xxl: number;
8
+ 24: number;
9
+ 48: number;
10
+ 64: number;
11
+ 80: number;
12
+ 128: number;
13
+ 144: number;
8
14
  };
9
15
  declare const STROKE: {
10
16
  xs: number;
@@ -13,6 +19,12 @@ declare const STROKE: {
13
19
  l: number;
14
20
  xl: number;
15
21
  xxl: number;
22
+ 24: number;
23
+ 48: number;
24
+ 64: number;
25
+ 80: number;
26
+ 128: number;
27
+ 144: number;
16
28
  };
17
29
  declare const VIEW_TITLE: {
18
30
  readonly xs: "small";
@@ -21,6 +33,12 @@ declare const VIEW_TITLE: {
21
33
  readonly l: "xsmall";
22
34
  readonly xl: "medium";
23
35
  readonly xxl: "medium";
36
+ readonly 24: "small";
37
+ readonly 48: "small";
38
+ readonly 64: "small";
39
+ readonly 80: "xsmall";
40
+ readonly 128: "medium";
41
+ readonly 144: "medium";
24
42
  };
25
43
  declare const VIEW_TEXT: {
26
44
  readonly xs: "secondary-small";
@@ -29,6 +47,26 @@ declare const VIEW_TEXT: {
29
47
  readonly l: "secondary-large";
30
48
  readonly xl: "secondary-large";
31
49
  readonly xxl: "secondary-large";
50
+ readonly 24: "secondary-small";
51
+ readonly 48: "secondary-small";
52
+ readonly 64: "secondary-large";
53
+ readonly 80: "secondary-large";
54
+ readonly 128: "secondary-large";
55
+ readonly 144: "secondary-large";
32
56
  };
33
57
  declare const TYPOGRAPHY_COLOR: string[];
34
- export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };
58
+ declare const SIZE_TO_CLASSNAME_MAP: {
59
+ xs: string;
60
+ s: string;
61
+ m: string;
62
+ l: string;
63
+ xl: string;
64
+ xxl: string;
65
+ 24: string;
66
+ 48: string;
67
+ 64: string;
68
+ 80: string;
69
+ 128: string;
70
+ 144: string;
71
+ };
72
+ export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };
package/cssm/consts.js CHANGED
@@ -9,6 +9,12 @@ var SIZES = {
9
9
  l: 80,
10
10
  xl: 128,
11
11
  xxl: 144,
12
+ 24: 24,
13
+ 48: 48,
14
+ 64: 64,
15
+ 80: 80,
16
+ 128: 128,
17
+ 144: 144,
12
18
  };
13
19
  var STROKE = {
14
20
  xs: 4,
@@ -17,6 +23,12 @@ var STROKE = {
17
23
  l: 8,
18
24
  xl: 10,
19
25
  xxl: 12,
26
+ 24: 4,
27
+ 48: 4,
28
+ 64: 6,
29
+ 80: 8,
30
+ 128: 10,
31
+ 144: 12,
20
32
  };
21
33
  var VIEW_TITLE = {
22
34
  xs: 'small',
@@ -25,6 +37,12 @@ var VIEW_TITLE = {
25
37
  l: 'xsmall',
26
38
  xl: 'medium',
27
39
  xxl: 'medium',
40
+ 24: 'small',
41
+ 48: 'small',
42
+ 64: 'small',
43
+ 80: 'xsmall',
44
+ 128: 'medium',
45
+ 144: 'medium',
28
46
  };
29
47
  var VIEW_TEXT = {
30
48
  xs: 'secondary-small',
@@ -33,10 +51,31 @@ var VIEW_TEXT = {
33
51
  l: 'secondary-large',
34
52
  xl: 'secondary-large',
35
53
  xxl: 'secondary-large',
54
+ 24: 'secondary-small',
55
+ 48: 'secondary-small',
56
+ 64: 'secondary-large',
57
+ 80: 'secondary-large',
58
+ 128: 'secondary-large',
59
+ 144: 'secondary-large',
36
60
  };
37
61
  var TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
62
+ var SIZE_TO_CLASSNAME_MAP = {
63
+ xs: 'size-24',
64
+ s: 'size-48',
65
+ m: 'size-64',
66
+ l: 'size-80',
67
+ xl: 'size-128',
68
+ xxl: 'size-144',
69
+ 24: 'size-24',
70
+ 48: 'size-48',
71
+ 64: 'size-64',
72
+ 80: 'size-80',
73
+ 128: 'size-128',
74
+ 144: 'size-144',
75
+ };
38
76
 
39
77
  exports.SIZES = SIZES;
78
+ exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
40
79
  exports.STROKE = STROKE;
41
80
  exports.TYPOGRAPHY_COLOR = TYPOGRAPHY_COLOR;
42
81
  exports.VIEW_TEXT = VIEW_TEXT;
package/cssm/index.module.css CHANGED
@@ -1,11 +1,11 @@
1
- :root {
1
+ :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 */ /* 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 */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root {
3
- --color-light-neutral-1500: #0e0e0e;
3
+ --color-light-neutral-1500: #121213;
4
4
  --color-light-neutral-1500-inverted: #fff;
5
5
  --color-light-neutral-500: #babbc2;
6
6
  --color-light-neutral-700: #898991;
7
7
  --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
8
- --color-light-status-negative: #ff5431;
8
+ --color-light-status-negative: #ff4837;
9
9
  --color-light-status-positive: #0cc44d; /* 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 */
10
10
  } :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 */
11
11
  } :root {
@@ -73,47 +73,47 @@
73
73
  font-feature-settings: 'ss01';
74
74
  font-weight: var(--circular-progress-bar-font-weight);
75
75
  font-family: var(--circular-progress-bar-font-family);
76
- } .xxl {
76
+ } .size-144 {
77
77
  width: 144px;
78
78
  height: 144px
79
- } .xxl .labelWrapper {
79
+ } .size-144 .labelWrapper {
80
80
  max-width: 128px;
81
- } .xxl .title {
81
+ } .size-144 .title {
82
82
  max-height: 32px;
83
- } .xl {
83
+ } .size-128 {
84
84
  width: 128px;
85
85
  height: 128px
86
- } .xl .labelWrapper {
86
+ } .size-128 .labelWrapper {
87
87
  max-width: 108px;
88
- } .xl .title {
88
+ } .size-128 .title {
89
89
  max-height: 32px;
90
- } .l {
90
+ } .size-80 {
91
91
  width: 80px;
92
92
  height: 80px
93
- } .l .labelWrapper {
93
+ } .size-80 .labelWrapper {
94
94
  max-width: 64px;
95
- } .l .title {
95
+ } .size-80 .title {
96
96
  max-height: 24px;
97
- } .m {
97
+ } .size-64 {
98
98
  width: 64px;
99
99
  height: 64px
100
- } .m .labelWrapper {
100
+ } .size-64 .labelWrapper {
101
101
  max-width: 48px;
102
- } .m .title {
102
+ } .size-64 .title {
103
103
  max-height: 16px;
104
104
  margin: 0;
105
- } .s {
105
+ } .size-48 {
106
106
  width: 48px;
107
107
  height: 48px
108
- } .s .labelWrapper {
108
+ } .size-48 .labelWrapper {
109
109
  max-width: 40px;
110
- } .s .title {
110
+ } .size-48 .title {
111
111
  max-height: 16px;
112
112
  margin: 0;
113
- } .xs {
113
+ } .size-24 {
114
114
  width: 24px;
115
115
  height: 24px
116
- } .xs .labelWrapper {
116
+ } .size-24 .labelWrapper {
117
117
  max-width: 24px;
118
118
  } .backgroundCircle,
119
119
  .progressCircle {
@@ -134,22 +134,22 @@
134
134
  display: flex;
135
135
  align-items: center;
136
136
  justify-content: center
137
- } .iconWrapper.xxl {
137
+ } .iconWrapper.size-144 {
138
138
  max-width: 64px;
139
139
  max-height: 64px;
140
- } .iconWrapper.xl {
140
+ } .iconWrapper.size-128 {
141
141
  max-width: 64px;
142
142
  max-height: 64px;
143
- } .iconWrapper.l {
143
+ } .iconWrapper.size-80 {
144
144
  max-width: 48px;
145
145
  max-height: 48px;
146
- } .iconWrapper.m {
146
+ } .iconWrapper.size-64 {
147
147
  max-width: 36px;
148
148
  max-height: 36px;
149
- } .iconWrapper.s {
149
+ } .iconWrapper.size-48 {
150
150
  max-width: 24px;
151
151
  max-height: 24px;
152
- } .iconWrapper.xs {
152
+ } .iconWrapper.size-24 {
153
153
  max-width: 16px;
154
154
  max-height: 16px;
155
155
  } .iconWrapper.icon-tertiary {
package/esm/Component.d.ts CHANGED
@@ -37,8 +37,9 @@ type CircularProgressBarProps = {
37
37
  view?: 'positive' | 'negative';
38
38
  /**
39
39
  * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
40
+ * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
40
41
  */
41
- size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
42
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
42
43
  /**
43
44
  * Наличие желоба
44
45
  */
package/esm/Component.js CHANGED
@@ -2,9 +2,9 @@ import { __assign } from 'tslib';
2
2
  import React, { useMemo } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { Typography } from '@alfalab/core-components-typography/esm';
5
- import { STROKE, SIZES, TYPOGRAPHY_COLOR, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
+ import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
6
6
 
7
- var styles = {"component":"circular-progress-bar__component_1ckn0","bg-positive":"circular-progress-bar__bg-positive_1ckn0","bg-negative":"circular-progress-bar__bg-negative_1ckn0","svg":"circular-progress-bar__svg_1ckn0","title":"circular-progress-bar__title_1ckn0","subtitle":"circular-progress-bar__subtitle_1ckn0","labelWrapper":"circular-progress-bar__labelWrapper_1ckn0","label":"circular-progress-bar__label_1ckn0","typography":"circular-progress-bar__typography_1ckn0","xxl":"circular-progress-bar__xxl_1ckn0","xl":"circular-progress-bar__xl_1ckn0","l":"circular-progress-bar__l_1ckn0","m":"circular-progress-bar__m_1ckn0","s":"circular-progress-bar__s_1ckn0","xs":"circular-progress-bar__xs_1ckn0","backgroundCircle":"circular-progress-bar__backgroundCircle_1ckn0","progressCircle":"circular-progress-bar__progressCircle_1ckn0","positive":"circular-progress-bar__positive_1ckn0","negative":"circular-progress-bar__negative_1ckn0","stroke":"circular-progress-bar__stroke_1ckn0","iconWrapper":"circular-progress-bar__iconWrapper_1ckn0","icon-tertiary":"circular-progress-bar__icon-tertiary_1ckn0","icon-positive":"circular-progress-bar__icon-positive_1ckn0","icon-negative":"circular-progress-bar__icon-negative_1ckn0","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1ckn0","icon-primary":"circular-progress-bar__icon-primary_1ckn0","icon-secondary":"circular-progress-bar__icon-secondary_1ckn0","icon":"circular-progress-bar__icon_1ckn0"};
7
+ var styles = {"component":"circular-progress-bar__component_ath2v","bg-positive":"circular-progress-bar__bg-positive_ath2v","bg-negative":"circular-progress-bar__bg-negative_ath2v","svg":"circular-progress-bar__svg_ath2v","title":"circular-progress-bar__title_ath2v","subtitle":"circular-progress-bar__subtitle_ath2v","labelWrapper":"circular-progress-bar__labelWrapper_ath2v","label":"circular-progress-bar__label_ath2v","typography":"circular-progress-bar__typography_ath2v","size-144":"circular-progress-bar__size-144_ath2v","size-128":"circular-progress-bar__size-128_ath2v","size-80":"circular-progress-bar__size-80_ath2v","size-64":"circular-progress-bar__size-64_ath2v","size-48":"circular-progress-bar__size-48_ath2v","size-24":"circular-progress-bar__size-24_ath2v","backgroundCircle":"circular-progress-bar__backgroundCircle_ath2v","progressCircle":"circular-progress-bar__progressCircle_ath2v","positive":"circular-progress-bar__positive_ath2v","negative":"circular-progress-bar__negative_ath2v","stroke":"circular-progress-bar__stroke_ath2v","iconWrapper":"circular-progress-bar__iconWrapper_ath2v","icon-tertiary":"circular-progress-bar__icon-tertiary_ath2v","icon-positive":"circular-progress-bar__icon-positive_ath2v","icon-negative":"circular-progress-bar__icon-negative_ath2v","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_ath2v","icon-primary":"circular-progress-bar__icon-primary_ath2v","icon-secondary":"circular-progress-bar__icon-secondary_ath2v","icon":"circular-progress-bar__icon_ath2v"};
8
8
  require('./index.css')
9
9
 
10
10
  /**
@@ -12,7 +12,7 @@ require('./index.css')
12
12
  */
13
13
  var CircularProgressBar = function (_a) {
14
14
  var _b, _c, _d;
15
- var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _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;
15
+ 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;
16
16
  var memorized = useMemo(function () {
17
17
  var strokeWidth = STROKE[size];
18
18
  var maxProgress = 100;
@@ -51,7 +51,7 @@ var CircularProgressBar = function (_a) {
51
51
  };
52
52
  var renderIcon = function () {
53
53
  var _a;
54
- return (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles["icon-".concat(contentColor)], (_a = {},
54
+ return (React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles["icon-".concat(contentColor)], (_a = {},
55
55
  _a[styles["icon-".concat(completeIconColor)]] = completeIconColor,
56
56
  _a)) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
57
57
  };
@@ -60,14 +60,14 @@ var CircularProgressBar = function (_a) {
60
60
  SIZES[size] > 24 && renderTitle(),
61
61
  SIZES[size] > 64 && renderSubTitle()));
62
62
  };
63
- return (React.createElement("div", { className: cn(styles.component, styles[size], className, (_b = {},
63
+ return (React.createElement("div", { className: cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, (_b = {},
64
64
  _b[styles["bg-".concat(view)]] = fillComplete && isComplete,
65
65
  _b)), style: __assign(__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
66
66
  React.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
67
- React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], (_c = {},
67
+ React.createElement("circle", { className: cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
68
68
  _c[styles.stroke] = !stroke,
69
69
  _c)), style: __assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
70
- React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size]), style: __assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
70
+ React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[SIZE_TO_CLASSNAME_MAP[size]]), style: __assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
71
71
  ? -memorized.strokeDashoffset
72
72
  : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
73
73
  React.createElement("div", { className: cn(styles.labelWrapper, (_d = {},
package/esm/consts.d.ts CHANGED
@@ -5,6 +5,12 @@ declare const SIZES: {
5
5
  l: number;
6
6
  xl: number;
7
7
  xxl: number;
8
+ 24: number;
9
+ 48: number;
10
+ 64: number;
11
+ 80: number;
12
+ 128: number;
13
+ 144: number;
8
14
  };
9
15
  declare const STROKE: {
10
16
  xs: number;
@@ -13,6 +19,12 @@ declare const STROKE: {
13
19
  l: number;
14
20
  xl: number;
15
21
  xxl: number;
22
+ 24: number;
23
+ 48: number;
24
+ 64: number;
25
+ 80: number;
26
+ 128: number;
27
+ 144: number;
16
28
  };
17
29
  declare const VIEW_TITLE: {
18
30
  readonly xs: "small";
@@ -21,6 +33,12 @@ declare const VIEW_TITLE: {
21
33
  readonly l: "xsmall";
22
34
  readonly xl: "medium";
23
35
  readonly xxl: "medium";
36
+ readonly 24: "small";
37
+ readonly 48: "small";
38
+ readonly 64: "small";
39
+ readonly 80: "xsmall";
40
+ readonly 128: "medium";
41
+ readonly 144: "medium";
24
42
  };
25
43
  declare const VIEW_TEXT: {
26
44
  readonly xs: "secondary-small";
@@ -29,6 +47,26 @@ declare const VIEW_TEXT: {
29
47
  readonly l: "secondary-large";
30
48
  readonly xl: "secondary-large";
31
49
  readonly xxl: "secondary-large";
50
+ readonly 24: "secondary-small";
51
+ readonly 48: "secondary-small";
52
+ readonly 64: "secondary-large";
53
+ readonly 80: "secondary-large";
54
+ readonly 128: "secondary-large";
55
+ readonly 144: "secondary-large";
32
56
  };
33
57
  declare const TYPOGRAPHY_COLOR: string[];
34
- export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };
58
+ declare const SIZE_TO_CLASSNAME_MAP: {
59
+ xs: string;
60
+ s: string;
61
+ m: string;
62
+ l: string;
63
+ xl: string;
64
+ xxl: string;
65
+ 24: string;
66
+ 48: string;
67
+ 64: string;
68
+ 80: string;
69
+ 128: string;
70
+ 144: string;
71
+ };
72
+ export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };