@alfalab/core-components-circular-progress-bar 3.1.0 → 3.2.0

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 (28) hide show
  1. package/Component.d.ts +12 -3
  2. package/Component.js +20 -48
  3. package/consts.d.ts +34 -0
  4. package/consts.js +43 -0
  5. package/cssm/Component.d.ts +12 -3
  6. package/cssm/Component.js +19 -47
  7. package/cssm/consts.d.ts +34 -0
  8. package/cssm/consts.js +43 -0
  9. package/cssm/index.js +1 -0
  10. package/cssm/index.module.css +9 -7
  11. package/esm/Component.d.ts +12 -3
  12. package/esm/Component.js +15 -43
  13. package/esm/consts.d.ts +34 -0
  14. package/esm/consts.js +35 -0
  15. package/esm/index.css +54 -52
  16. package/esm/index.js +1 -0
  17. package/index.css +54 -52
  18. package/index.js +1 -0
  19. package/modern/Component.d.ts +12 -3
  20. package/modern/Component.js +21 -40
  21. package/modern/consts.d.ts +34 -0
  22. package/modern/consts.js +35 -0
  23. package/modern/index.css +54 -52
  24. package/modern/index.js +1 -0
  25. package/package.json +2 -2
  26. package/src/Component.tsx +40 -44
  27. package/src/consts.ts +37 -0
  28. package/src/index.module.css +9 -8
package/esm/Component.js CHANGED
@@ -2,48 +2,17 @@ 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
6
 
6
- var styles = {"component":"circular-progress-bar__component_xzi53","svg":"circular-progress-bar__svg_xzi53","title":"circular-progress-bar__title_xzi53","subtitle":"circular-progress-bar__subtitle_xzi53","labelWrapper":"circular-progress-bar__labelWrapper_xzi53","label":"circular-progress-bar__label_xzi53","typography":"circular-progress-bar__typography_xzi53","xxl":"circular-progress-bar__xxl_xzi53","xl":"circular-progress-bar__xl_xzi53","l":"circular-progress-bar__l_xzi53","m":"circular-progress-bar__m_xzi53","s":"circular-progress-bar__s_xzi53","xs":"circular-progress-bar__xs_xzi53","backgroundCircle":"circular-progress-bar__backgroundCircle_xzi53","progressCircle":"circular-progress-bar__progressCircle_xzi53","positive":"circular-progress-bar__positive_xzi53","negative":"circular-progress-bar__negative_xzi53","stroke":"circular-progress-bar__stroke_xzi53","bg-positive":"circular-progress-bar__bg-positive_xzi53","bg-negative":"circular-progress-bar__bg-negative_xzi53","iconWrapper":"circular-progress-bar__iconWrapper_xzi53","icon-tertiary":"circular-progress-bar__icon-tertiary_xzi53","icon-positive":"circular-progress-bar__icon-positive_xzi53","icon-negative":"circular-progress-bar__icon-negative_xzi53","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_xzi53","icon-primary":"circular-progress-bar__icon-primary_xzi53","icon-secondary":"circular-progress-bar__icon-secondary_xzi53","icon":"circular-progress-bar__icon_xzi53"};
7
+ var styles = {"component":"circular-progress-bar__component_kekau","bg-positive":"circular-progress-bar__bg-positive_kekau","bg-negative":"circular-progress-bar__bg-negative_kekau","svg":"circular-progress-bar__svg_kekau","title":"circular-progress-bar__title_kekau","subtitle":"circular-progress-bar__subtitle_kekau","labelWrapper":"circular-progress-bar__labelWrapper_kekau","label":"circular-progress-bar__label_kekau","typography":"circular-progress-bar__typography_kekau","xxl":"circular-progress-bar__xxl_kekau","xl":"circular-progress-bar__xl_kekau","l":"circular-progress-bar__l_kekau","m":"circular-progress-bar__m_kekau","s":"circular-progress-bar__s_kekau","xs":"circular-progress-bar__xs_kekau","backgroundCircle":"circular-progress-bar__backgroundCircle_kekau","progressCircle":"circular-progress-bar__progressCircle_kekau","positive":"circular-progress-bar__positive_kekau","negative":"circular-progress-bar__negative_kekau","stroke":"circular-progress-bar__stroke_kekau","iconWrapper":"circular-progress-bar__iconWrapper_kekau","icon-tertiary":"circular-progress-bar__icon-tertiary_kekau","icon-positive":"circular-progress-bar__icon-positive_kekau","icon-negative":"circular-progress-bar__icon-negative_kekau","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_kekau","icon-primary":"circular-progress-bar__icon-primary_kekau","icon-secondary":"circular-progress-bar__icon-secondary_kekau","icon":"circular-progress-bar__icon_kekau"};
7
8
  require('./index.css')
8
9
 
9
- var SIZES = {
10
- xs: 24,
11
- s: 48,
12
- m: 64,
13
- l: 80,
14
- xl: 128,
15
- xxl: 144,
16
- };
17
- var STROKE = {
18
- xs: 4,
19
- s: 4,
20
- m: 6,
21
- l: 8,
22
- xl: 10,
23
- xxl: 12,
24
- };
25
- var VIEW_TITLE = {
26
- xs: 'small',
27
- s: 'small',
28
- m: 'small',
29
- l: 'xsmall',
30
- xl: 'medium',
31
- xxl: 'medium',
32
- };
33
- var VIEW_TEXT = {
34
- xs: 'secondary-small',
35
- s: 'secondary-small',
36
- m: 'secondary-large',
37
- l: 'secondary-large',
38
- xl: 'secondary-large',
39
- xxl: 'secondary-large',
40
- };
41
10
  /**
42
11
  * Компонент круглого прогресс бара.
43
12
  */
44
13
  var CircularProgressBar = function (_a) {
45
14
  var _b, _c, _d;
46
- 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;
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;
47
16
  var memorized = useMemo(function () {
48
17
  var strokeWidth = STROKE[size];
49
18
  var maxProgress = 100;
@@ -70,12 +39,15 @@ var CircularProgressBar = function (_a) {
70
39
  var titleContent = titleComplete && isComplete ? titleComplete : title;
71
40
  var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
72
41
  var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
42
+ var typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
43
+ ? contentColor
44
+ : undefined;
73
45
  var renderTitleString = function () {
74
- return SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent));
46
+ return SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: __assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: __assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
75
47
  };
76
48
  var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
77
49
  var renderSubTitle = function () {
78
- return typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
50
+ return typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: __assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
79
51
  };
80
52
  var renderIcon = function () {
81
53
  var _a;
@@ -88,14 +60,14 @@ var CircularProgressBar = function (_a) {
88
60
  SIZES[size] > 24 && renderTitle(),
89
61
  SIZES[size] > 64 && renderSubTitle()));
90
62
  };
91
- return (React.createElement("div", { className: cn(styles.component, styles[size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
63
+ return (React.createElement("div", { className: cn(styles.component, styles[size], className, (_b = {},
64
+ _b[styles["bg-".concat(view)]] = fillComplete && isComplete,
65
+ _b)), style: __assign(__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
92
66
  React.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
93
- React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], (_b = {},
94
- _b[styles.stroke] = !stroke,
95
- _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
96
- React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size], (_c = {},
97
- _c[styles["bg-".concat(view)]] = fillComplete && isComplete,
98
- _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
67
+ React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], (_c = {},
68
+ _c[styles.stroke] = !stroke,
69
+ _c)), 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'
99
71
  ? -memorized.strokeDashoffset
100
72
  : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
101
73
  React.createElement("div", { className: cn(styles.labelWrapper, (_d = {},
package/esm/consts.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ declare const SIZES: {
2
+ xs: number;
3
+ s: number;
4
+ m: number;
5
+ l: number;
6
+ xl: number;
7
+ xxl: number;
8
+ };
9
+ declare const STROKE: {
10
+ xs: number;
11
+ s: number;
12
+ m: number;
13
+ l: number;
14
+ xl: number;
15
+ xxl: number;
16
+ };
17
+ declare const VIEW_TITLE: {
18
+ readonly xs: "small";
19
+ readonly s: "small";
20
+ readonly m: "small";
21
+ readonly l: "xsmall";
22
+ readonly xl: "medium";
23
+ readonly xxl: "medium";
24
+ };
25
+ declare const VIEW_TEXT: {
26
+ readonly xs: "secondary-small";
27
+ readonly s: "secondary-small";
28
+ readonly m: "secondary-large";
29
+ readonly l: "secondary-large";
30
+ readonly xl: "secondary-large";
31
+ readonly xxl: "secondary-large";
32
+ };
33
+ declare const TYPOGRAPHY_COLOR: string[];
34
+ export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };
package/esm/consts.js ADDED
@@ -0,0 +1,35 @@
1
+ var SIZES = {
2
+ xs: 24,
3
+ s: 48,
4
+ m: 64,
5
+ l: 80,
6
+ xl: 128,
7
+ xxl: 144,
8
+ };
9
+ var STROKE = {
10
+ xs: 4,
11
+ s: 4,
12
+ m: 6,
13
+ l: 8,
14
+ xl: 10,
15
+ xxl: 12,
16
+ };
17
+ var VIEW_TITLE = {
18
+ xs: 'small',
19
+ s: 'small',
20
+ m: 'small',
21
+ l: 'xsmall',
22
+ xl: 'medium',
23
+ xxl: 'medium',
24
+ };
25
+ var VIEW_TEXT = {
26
+ xs: 'secondary-small',
27
+ s: 'secondary-small',
28
+ m: 'secondary-large',
29
+ l: 'secondary-large',
30
+ xl: 'secondary-large',
31
+ xxl: 'secondary-large',
32
+ };
33
+ var TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
34
+
35
+ export { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: n376a */
1
+ /* hash: mxnd9 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -18,6 +18,7 @@
18
18
 
19
19
  /* Hard up */
20
20
  } :root {
21
+ --border-radius-pill: 99px;
21
22
  } :root {
22
23
  } :root {
23
24
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -36,134 +37,135 @@
36
37
  /* theme */
37
38
  --circular-progress-bar-font-family: var(--font-family-system);
38
39
  --circular-progress-bar-font-weight: 600;
39
- } .circular-progress-bar__component_xzi53 {
40
+ } .circular-progress-bar__component_kekau {
40
41
  position: relative;
41
42
  display: flex;
42
43
  justify-content: center;
43
44
  align-items: center;
44
- } .circular-progress-bar__svg_xzi53 {
45
+ border-radius: var(--border-radius-pill)
46
+ } .circular-progress-bar__component_kekau.circular-progress-bar__bg-positive_kekau {
47
+ background: var(--circular-progress-bar-positive-color);
48
+ } .circular-progress-bar__component_kekau.circular-progress-bar__bg-negative_kekau {
49
+ background: var(--circular-progress-bar-negative-color);
50
+ } .circular-progress-bar__svg_kekau {
45
51
  display: block;
46
52
  width: 100%;
47
- } .circular-progress-bar__title_xzi53,
48
- .circular-progress-bar__subtitle_xzi53 {
53
+ } .circular-progress-bar__title_kekau,
54
+ .circular-progress-bar__subtitle_kekau {
49
55
  overflow: hidden;
50
56
  word-break: break-word;
51
57
  white-space: nowrap;
52
58
  text-overflow: ellipsis;
53
59
  margin: 0 6px;
54
- } .circular-progress-bar__subtitle_xzi53 {
60
+ } .circular-progress-bar__subtitle_kekau {
55
61
  max-height: 40px;
56
- } .circular-progress-bar__labelWrapper_xzi53 {
62
+ } .circular-progress-bar__labelWrapper_kekau {
57
63
  text-align: center;
58
64
  position: absolute;
59
65
  top: 50%;
60
66
  left: 50%;
61
67
  width: 100%;
62
68
  transform: translate(-50%, -50%)
63
- } .circular-progress-bar__labelWrapper_xzi53.circular-progress-bar__label_xzi53 {
69
+ } .circular-progress-bar__labelWrapper_kekau.circular-progress-bar__label_kekau {
64
70
  display: flex;
65
71
  align-items: center;
66
72
  justify-content: center;
67
- } .circular-progress-bar__typography_xzi53 {
73
+ } .circular-progress-bar__typography_kekau {
68
74
  font-feature-settings: 'ss01';
69
75
  font-weight: var(--circular-progress-bar-font-weight);
70
76
  font-family: var(--circular-progress-bar-font-family);
71
- } .circular-progress-bar__xxl_xzi53 {
77
+ } .circular-progress-bar__xxl_kekau {
72
78
  width: 144px;
73
79
  height: 144px
74
- } .circular-progress-bar__xxl_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
80
+ } .circular-progress-bar__xxl_kekau .circular-progress-bar__labelWrapper_kekau {
75
81
  max-width: 128px;
76
- } .circular-progress-bar__xxl_xzi53 .circular-progress-bar__title_xzi53 {
82
+ } .circular-progress-bar__xxl_kekau .circular-progress-bar__title_kekau {
77
83
  max-height: 32px;
78
- } .circular-progress-bar__xl_xzi53 {
84
+ } .circular-progress-bar__xl_kekau {
79
85
  width: 128px;
80
86
  height: 128px
81
- } .circular-progress-bar__xl_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
87
+ } .circular-progress-bar__xl_kekau .circular-progress-bar__labelWrapper_kekau {
82
88
  max-width: 108px;
83
- } .circular-progress-bar__xl_xzi53 .circular-progress-bar__title_xzi53 {
89
+ } .circular-progress-bar__xl_kekau .circular-progress-bar__title_kekau {
84
90
  max-height: 32px;
85
- } .circular-progress-bar__l_xzi53 {
91
+ } .circular-progress-bar__l_kekau {
86
92
  width: 80px;
87
93
  height: 80px
88
- } .circular-progress-bar__l_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
94
+ } .circular-progress-bar__l_kekau .circular-progress-bar__labelWrapper_kekau {
89
95
  max-width: 64px;
90
- } .circular-progress-bar__l_xzi53 .circular-progress-bar__title_xzi53 {
96
+ } .circular-progress-bar__l_kekau .circular-progress-bar__title_kekau {
91
97
  max-height: 24px;
92
- } .circular-progress-bar__m_xzi53 {
98
+ } .circular-progress-bar__m_kekau {
93
99
  width: 64px;
94
100
  height: 64px
95
- } .circular-progress-bar__m_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
101
+ } .circular-progress-bar__m_kekau .circular-progress-bar__labelWrapper_kekau {
96
102
  max-width: 48px;
97
- } .circular-progress-bar__m_xzi53 .circular-progress-bar__title_xzi53 {
103
+ } .circular-progress-bar__m_kekau .circular-progress-bar__title_kekau {
98
104
  max-height: 16px;
99
105
  margin: 0;
100
- } .circular-progress-bar__s_xzi53 {
106
+ } .circular-progress-bar__s_kekau {
101
107
  width: 48px;
102
108
  height: 48px
103
- } .circular-progress-bar__s_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
109
+ } .circular-progress-bar__s_kekau .circular-progress-bar__labelWrapper_kekau {
104
110
  max-width: 40px;
105
- } .circular-progress-bar__s_xzi53 .circular-progress-bar__title_xzi53 {
111
+ } .circular-progress-bar__s_kekau .circular-progress-bar__title_kekau {
106
112
  max-height: 16px;
107
113
  margin: 0;
108
- } .circular-progress-bar__xs_xzi53 {
114
+ } .circular-progress-bar__xs_kekau {
109
115
  width: 24px;
110
116
  height: 24px
111
- } .circular-progress-bar__xs_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
117
+ } .circular-progress-bar__xs_kekau .circular-progress-bar__labelWrapper_kekau {
112
118
  max-width: 24px;
113
- } .circular-progress-bar__backgroundCircle_xzi53,
114
- .circular-progress-bar__progressCircle_xzi53 {
119
+ } .circular-progress-bar__backgroundCircle_kekau,
120
+ .circular-progress-bar__progressCircle_kekau {
115
121
  width: 100%;
116
122
  height: 100%;
117
123
  fill: transparent;
118
- } .circular-progress-bar__positive_xzi53 {
124
+ } .circular-progress-bar__positive_kekau {
119
125
  stroke: var(--circular-progress-bar-positive-color);
120
- } .circular-progress-bar__negative_xzi53 {
126
+ } .circular-progress-bar__negative_kekau {
121
127
  stroke: var(--circular-progress-bar-negative-color);
122
- } .circular-progress-bar__backgroundCircle_xzi53 {
128
+ } .circular-progress-bar__backgroundCircle_kekau {
123
129
  stroke: var(--circular-progress-bar-stroke-color)
124
- } .circular-progress-bar__backgroundCircle_xzi53.circular-progress-bar__stroke_xzi53 {
130
+ } .circular-progress-bar__backgroundCircle_kekau.circular-progress-bar__stroke_kekau {
125
131
  stroke: transparent;
126
- } .circular-progress-bar__progressCircle_xzi53 {
127
- stroke-linecap: round
128
- } .circular-progress-bar__progressCircle_xzi53.circular-progress-bar__bg-positive_xzi53 {
129
- fill: var(--circular-progress-bar-positive-color);
130
- } .circular-progress-bar__progressCircle_xzi53.circular-progress-bar__bg-negative_xzi53 {
131
- fill: var(--circular-progress-bar-negative-color);
132
- } .circular-progress-bar__iconWrapper_xzi53 {
132
+ } .circular-progress-bar__progressCircle_kekau {
133
+ stroke-linecap: round;
134
+ } .circular-progress-bar__iconWrapper_kekau {
133
135
  display: flex;
134
136
  align-items: center;
135
137
  justify-content: center
136
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xxl_xzi53 {
138
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xxl_kekau {
137
139
  max-width: 64px;
138
140
  max-height: 64px;
139
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xl_xzi53 {
141
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xl_kekau {
140
142
  max-width: 64px;
141
143
  max-height: 64px;
142
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__l_xzi53 {
144
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__l_kekau {
143
145
  max-width: 48px;
144
146
  max-height: 48px;
145
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__m_xzi53 {
147
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__m_kekau {
146
148
  max-width: 36px;
147
149
  max-height: 36px;
148
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__s_xzi53 {
150
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__s_kekau {
149
151
  max-width: 24px;
150
152
  max-height: 24px;
151
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xs_xzi53 {
153
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xs_kekau {
152
154
  max-width: 16px;
153
155
  max-height: 16px;
154
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-tertiary_xzi53 {
156
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-tertiary_kekau {
155
157
  color: var(--color-light-graphic-tertiary);
156
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-positive_xzi53 {
158
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-positive_kekau {
157
159
  color: var(--color-light-graphic-positive);
158
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-negative_xzi53 {
160
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-negative_kekau {
159
161
  color: var(--color-light-graphic-negative);
160
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-primary-inverted_xzi53 {
162
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary-inverted_kekau {
161
163
  color: var(--color-light-graphic-primary-inverted);
162
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-primary_xzi53 {
164
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary_kekau {
163
165
  color: var(--color-light-graphic-primary);
164
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-secondary_xzi53 {
166
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-secondary_kekau {
165
167
  color: var(--color-light-graphic-secondary);
166
- } .circular-progress-bar__icon_xzi53 {
168
+ } .circular-progress-bar__icon_kekau {
167
169
  width: 100%;
168
170
  height: 100%;
169
171
  }
package/esm/index.js CHANGED
@@ -3,3 +3,4 @@ import 'tslib';
3
3
  import 'react';
4
4
  import 'classnames';
5
5
  import '@alfalab/core-components-typography/esm';
6
+ import './consts.js';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: n376a */
1
+ /* hash: mxnd9 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -18,6 +18,7 @@
18
18
 
19
19
  /* Hard up */
20
20
  } :root {
21
+ --border-radius-pill: 99px;
21
22
  } :root {
22
23
  } :root {
23
24
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -36,134 +37,135 @@
36
37
  /* theme */
37
38
  --circular-progress-bar-font-family: var(--font-family-system);
38
39
  --circular-progress-bar-font-weight: 600;
39
- } .circular-progress-bar__component_xzi53 {
40
+ } .circular-progress-bar__component_kekau {
40
41
  position: relative;
41
42
  display: flex;
42
43
  justify-content: center;
43
44
  align-items: center;
44
- } .circular-progress-bar__svg_xzi53 {
45
+ border-radius: var(--border-radius-pill)
46
+ } .circular-progress-bar__component_kekau.circular-progress-bar__bg-positive_kekau {
47
+ background: var(--circular-progress-bar-positive-color);
48
+ } .circular-progress-bar__component_kekau.circular-progress-bar__bg-negative_kekau {
49
+ background: var(--circular-progress-bar-negative-color);
50
+ } .circular-progress-bar__svg_kekau {
45
51
  display: block;
46
52
  width: 100%;
47
- } .circular-progress-bar__title_xzi53,
48
- .circular-progress-bar__subtitle_xzi53 {
53
+ } .circular-progress-bar__title_kekau,
54
+ .circular-progress-bar__subtitle_kekau {
49
55
  overflow: hidden;
50
56
  word-break: break-word;
51
57
  white-space: nowrap;
52
58
  text-overflow: ellipsis;
53
59
  margin: 0 6px;
54
- } .circular-progress-bar__subtitle_xzi53 {
60
+ } .circular-progress-bar__subtitle_kekau {
55
61
  max-height: 40px;
56
- } .circular-progress-bar__labelWrapper_xzi53 {
62
+ } .circular-progress-bar__labelWrapper_kekau {
57
63
  text-align: center;
58
64
  position: absolute;
59
65
  top: 50%;
60
66
  left: 50%;
61
67
  width: 100%;
62
68
  transform: translate(-50%, -50%)
63
- } .circular-progress-bar__labelWrapper_xzi53.circular-progress-bar__label_xzi53 {
69
+ } .circular-progress-bar__labelWrapper_kekau.circular-progress-bar__label_kekau {
64
70
  display: flex;
65
71
  align-items: center;
66
72
  justify-content: center;
67
- } .circular-progress-bar__typography_xzi53 {
73
+ } .circular-progress-bar__typography_kekau {
68
74
  font-feature-settings: 'ss01';
69
75
  font-weight: var(--circular-progress-bar-font-weight);
70
76
  font-family: var(--circular-progress-bar-font-family);
71
- } .circular-progress-bar__xxl_xzi53 {
77
+ } .circular-progress-bar__xxl_kekau {
72
78
  width: 144px;
73
79
  height: 144px
74
- } .circular-progress-bar__xxl_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
80
+ } .circular-progress-bar__xxl_kekau .circular-progress-bar__labelWrapper_kekau {
75
81
  max-width: 128px;
76
- } .circular-progress-bar__xxl_xzi53 .circular-progress-bar__title_xzi53 {
82
+ } .circular-progress-bar__xxl_kekau .circular-progress-bar__title_kekau {
77
83
  max-height: 32px;
78
- } .circular-progress-bar__xl_xzi53 {
84
+ } .circular-progress-bar__xl_kekau {
79
85
  width: 128px;
80
86
  height: 128px
81
- } .circular-progress-bar__xl_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
87
+ } .circular-progress-bar__xl_kekau .circular-progress-bar__labelWrapper_kekau {
82
88
  max-width: 108px;
83
- } .circular-progress-bar__xl_xzi53 .circular-progress-bar__title_xzi53 {
89
+ } .circular-progress-bar__xl_kekau .circular-progress-bar__title_kekau {
84
90
  max-height: 32px;
85
- } .circular-progress-bar__l_xzi53 {
91
+ } .circular-progress-bar__l_kekau {
86
92
  width: 80px;
87
93
  height: 80px
88
- } .circular-progress-bar__l_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
94
+ } .circular-progress-bar__l_kekau .circular-progress-bar__labelWrapper_kekau {
89
95
  max-width: 64px;
90
- } .circular-progress-bar__l_xzi53 .circular-progress-bar__title_xzi53 {
96
+ } .circular-progress-bar__l_kekau .circular-progress-bar__title_kekau {
91
97
  max-height: 24px;
92
- } .circular-progress-bar__m_xzi53 {
98
+ } .circular-progress-bar__m_kekau {
93
99
  width: 64px;
94
100
  height: 64px
95
- } .circular-progress-bar__m_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
101
+ } .circular-progress-bar__m_kekau .circular-progress-bar__labelWrapper_kekau {
96
102
  max-width: 48px;
97
- } .circular-progress-bar__m_xzi53 .circular-progress-bar__title_xzi53 {
103
+ } .circular-progress-bar__m_kekau .circular-progress-bar__title_kekau {
98
104
  max-height: 16px;
99
105
  margin: 0;
100
- } .circular-progress-bar__s_xzi53 {
106
+ } .circular-progress-bar__s_kekau {
101
107
  width: 48px;
102
108
  height: 48px
103
- } .circular-progress-bar__s_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
109
+ } .circular-progress-bar__s_kekau .circular-progress-bar__labelWrapper_kekau {
104
110
  max-width: 40px;
105
- } .circular-progress-bar__s_xzi53 .circular-progress-bar__title_xzi53 {
111
+ } .circular-progress-bar__s_kekau .circular-progress-bar__title_kekau {
106
112
  max-height: 16px;
107
113
  margin: 0;
108
- } .circular-progress-bar__xs_xzi53 {
114
+ } .circular-progress-bar__xs_kekau {
109
115
  width: 24px;
110
116
  height: 24px
111
- } .circular-progress-bar__xs_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
117
+ } .circular-progress-bar__xs_kekau .circular-progress-bar__labelWrapper_kekau {
112
118
  max-width: 24px;
113
- } .circular-progress-bar__backgroundCircle_xzi53,
114
- .circular-progress-bar__progressCircle_xzi53 {
119
+ } .circular-progress-bar__backgroundCircle_kekau,
120
+ .circular-progress-bar__progressCircle_kekau {
115
121
  width: 100%;
116
122
  height: 100%;
117
123
  fill: transparent;
118
- } .circular-progress-bar__positive_xzi53 {
124
+ } .circular-progress-bar__positive_kekau {
119
125
  stroke: var(--circular-progress-bar-positive-color);
120
- } .circular-progress-bar__negative_xzi53 {
126
+ } .circular-progress-bar__negative_kekau {
121
127
  stroke: var(--circular-progress-bar-negative-color);
122
- } .circular-progress-bar__backgroundCircle_xzi53 {
128
+ } .circular-progress-bar__backgroundCircle_kekau {
123
129
  stroke: var(--circular-progress-bar-stroke-color)
124
- } .circular-progress-bar__backgroundCircle_xzi53.circular-progress-bar__stroke_xzi53 {
130
+ } .circular-progress-bar__backgroundCircle_kekau.circular-progress-bar__stroke_kekau {
125
131
  stroke: transparent;
126
- } .circular-progress-bar__progressCircle_xzi53 {
127
- stroke-linecap: round
128
- } .circular-progress-bar__progressCircle_xzi53.circular-progress-bar__bg-positive_xzi53 {
129
- fill: var(--circular-progress-bar-positive-color);
130
- } .circular-progress-bar__progressCircle_xzi53.circular-progress-bar__bg-negative_xzi53 {
131
- fill: var(--circular-progress-bar-negative-color);
132
- } .circular-progress-bar__iconWrapper_xzi53 {
132
+ } .circular-progress-bar__progressCircle_kekau {
133
+ stroke-linecap: round;
134
+ } .circular-progress-bar__iconWrapper_kekau {
133
135
  display: flex;
134
136
  align-items: center;
135
137
  justify-content: center
136
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xxl_xzi53 {
138
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xxl_kekau {
137
139
  max-width: 64px;
138
140
  max-height: 64px;
139
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xl_xzi53 {
141
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xl_kekau {
140
142
  max-width: 64px;
141
143
  max-height: 64px;
142
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__l_xzi53 {
144
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__l_kekau {
143
145
  max-width: 48px;
144
146
  max-height: 48px;
145
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__m_xzi53 {
147
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__m_kekau {
146
148
  max-width: 36px;
147
149
  max-height: 36px;
148
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__s_xzi53 {
150
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__s_kekau {
149
151
  max-width: 24px;
150
152
  max-height: 24px;
151
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xs_xzi53 {
153
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xs_kekau {
152
154
  max-width: 16px;
153
155
  max-height: 16px;
154
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-tertiary_xzi53 {
156
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-tertiary_kekau {
155
157
  color: var(--color-light-graphic-tertiary);
156
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-positive_xzi53 {
158
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-positive_kekau {
157
159
  color: var(--color-light-graphic-positive);
158
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-negative_xzi53 {
160
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-negative_kekau {
159
161
  color: var(--color-light-graphic-negative);
160
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-primary-inverted_xzi53 {
162
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary-inverted_kekau {
161
163
  color: var(--color-light-graphic-primary-inverted);
162
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-primary_xzi53 {
164
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary_kekau {
163
165
  color: var(--color-light-graphic-primary);
164
- } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-secondary_xzi53 {
166
+ } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-secondary_kekau {
165
167
  color: var(--color-light-graphic-secondary);
166
- } .circular-progress-bar__icon_xzi53 {
168
+ } .circular-progress-bar__icon_kekau {
167
169
  width: 100%;
168
170
  height: 100%;
169
171
  }
package/index.js CHANGED
@@ -7,6 +7,7 @@ require('tslib');
7
7
  require('react');
8
8
  require('classnames');
9
9
  require('@alfalab/core-components-typography');
10
+ require('./consts.js');
10
11
 
11
12
 
12
13
 
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
3
  import { ElementType, ReactNode } from "react";
4
+ type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
4
5
  type CircularProgressBarProps = {
5
6
  /**
6
7
  * Уровень прогресса, %
@@ -17,7 +18,7 @@ type CircularProgressBarProps = {
17
18
  /**
18
19
  * Цвет контента
19
20
  */
20
- contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
21
+ contentColor?: TypographyColor | string;
21
22
  /**
22
23
  * Дополнительный текст
23
24
  */
@@ -86,12 +87,20 @@ type CircularProgressBarProps = {
86
87
  */
87
88
  dataTestId?: string;
88
89
  /**
89
- * Дочерние элементы.
90
+ * Дочерние элементы
90
91
  */
91
92
  children?: ReactNode;
93
+ /**
94
+ * Цвет прогресса
95
+ */
96
+ progressStrokeColor?: string;
97
+ /**
98
+ * Цвет заливки внутри круга
99
+ */
100
+ circleColor?: string;
92
101
  };
93
102
  /**
94
103
  * Компонент круглого прогресс бара.
95
104
  */
96
105
  declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
97
- export { CircularProgressBarProps, CircularProgressBar };
106
+ export { TypographyColor, CircularProgressBarProps, CircularProgressBar };