@alfalab/core-components-circular-progress-bar 3.1.1 → 3.3.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 +16 -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 +16 -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 +16 -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 +16 -3
  20. package/modern/Component.js +24 -41
  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 +1 -1
  26. package/src/Component.tsx +49 -44
  27. package/src/consts.ts +37 -0
  28. package/src/index.module.css +9 -8
package/modern/Component.js CHANGED
@@ -1,46 +1,15 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
+ import { STROKE, SIZES, TYPOGRAPHY_COLOR, VIEW_TITLE, VIEW_TEXT } from './consts.js';
4
5
 
5
- const styles = {"component":"circular-progress-bar__component_q7chu","svg":"circular-progress-bar__svg_q7chu","title":"circular-progress-bar__title_q7chu","subtitle":"circular-progress-bar__subtitle_q7chu","labelWrapper":"circular-progress-bar__labelWrapper_q7chu","label":"circular-progress-bar__label_q7chu","typography":"circular-progress-bar__typography_q7chu","xxl":"circular-progress-bar__xxl_q7chu","xl":"circular-progress-bar__xl_q7chu","l":"circular-progress-bar__l_q7chu","m":"circular-progress-bar__m_q7chu","s":"circular-progress-bar__s_q7chu","xs":"circular-progress-bar__xs_q7chu","backgroundCircle":"circular-progress-bar__backgroundCircle_q7chu","progressCircle":"circular-progress-bar__progressCircle_q7chu","positive":"circular-progress-bar__positive_q7chu","negative":"circular-progress-bar__negative_q7chu","stroke":"circular-progress-bar__stroke_q7chu","bg-positive":"circular-progress-bar__bg-positive_q7chu","bg-negative":"circular-progress-bar__bg-negative_q7chu","iconWrapper":"circular-progress-bar__iconWrapper_q7chu","icon-tertiary":"circular-progress-bar__icon-tertiary_q7chu","icon-positive":"circular-progress-bar__icon-positive_q7chu","icon-negative":"circular-progress-bar__icon-negative_q7chu","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_q7chu","icon-primary":"circular-progress-bar__icon-primary_q7chu","icon-secondary":"circular-progress-bar__icon-secondary_q7chu","icon":"circular-progress-bar__icon_q7chu"};
6
+ const styles = {"component":"circular-progress-bar__component_5iq0y","bg-positive":"circular-progress-bar__bg-positive_5iq0y","bg-negative":"circular-progress-bar__bg-negative_5iq0y","svg":"circular-progress-bar__svg_5iq0y","title":"circular-progress-bar__title_5iq0y","subtitle":"circular-progress-bar__subtitle_5iq0y","labelWrapper":"circular-progress-bar__labelWrapper_5iq0y","label":"circular-progress-bar__label_5iq0y","typography":"circular-progress-bar__typography_5iq0y","xxl":"circular-progress-bar__xxl_5iq0y","xl":"circular-progress-bar__xl_5iq0y","l":"circular-progress-bar__l_5iq0y","m":"circular-progress-bar__m_5iq0y","s":"circular-progress-bar__s_5iq0y","xs":"circular-progress-bar__xs_5iq0y","backgroundCircle":"circular-progress-bar__backgroundCircle_5iq0y","progressCircle":"circular-progress-bar__progressCircle_5iq0y","positive":"circular-progress-bar__positive_5iq0y","negative":"circular-progress-bar__negative_5iq0y","stroke":"circular-progress-bar__stroke_5iq0y","iconWrapper":"circular-progress-bar__iconWrapper_5iq0y","icon-tertiary":"circular-progress-bar__icon-tertiary_5iq0y","icon-positive":"circular-progress-bar__icon-positive_5iq0y","icon-negative":"circular-progress-bar__icon-negative_5iq0y","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_5iq0y","icon-primary":"circular-progress-bar__icon-primary_5iq0y","icon-secondary":"circular-progress-bar__icon-secondary_5iq0y","icon":"circular-progress-bar__icon_5iq0y"};
6
7
  require('./index.css')
7
8
 
8
- const SIZES = {
9
- xs: 24,
10
- s: 48,
11
- m: 64,
12
- l: 80,
13
- xl: 128,
14
- xxl: 144,
15
- };
16
- const STROKE = {
17
- xs: 4,
18
- s: 4,
19
- m: 6,
20
- l: 8,
21
- xl: 10,
22
- xxl: 12,
23
- };
24
- const VIEW_TITLE = {
25
- xs: 'small',
26
- s: 'small',
27
- m: 'small',
28
- l: 'xsmall',
29
- xl: 'medium',
30
- xxl: 'medium',
31
- };
32
- const VIEW_TEXT = {
33
- xs: 'secondary-small',
34
- s: 'secondary-small',
35
- m: 'secondary-large',
36
- l: 'secondary-large',
37
- xl: 'secondary-large',
38
- xxl: 'secondary-large',
39
- };
40
9
  /**
41
10
  * Компонент круглого прогресс бара.
42
11
  */
43
- const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, }) => {
12
+ const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, strokeColor, }) => {
44
13
  const memorized = useMemo(() => {
45
14
  const strokeWidth = STROKE[size];
46
15
  const maxProgress = 100;
@@ -67,25 +36,39 @@ const CircularProgressBar = ({ value, view = 'positive', size = 'm', className,
67
36
  const titleContent = titleComplete && isComplete ? titleComplete : title;
68
37
  const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
69
38
  const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
70
- const renderTitleString = () => 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));
39
+ const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
40
+ ? contentColor
41
+ : undefined;
42
+ const renderTitleString = () => 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: {
43
+ ...(!typographyContentColor && { color: contentColor }),
44
+ } }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
45
+ ...(!typographyContentColor && { color: contentColor }),
46
+ } }, titleContent));
71
47
  const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
72
- const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
48
+ const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
49
+ ...(!typographyContentColor && { color: contentColor }),
50
+ } }, subtitleContent)) : (subtitleContent);
73
51
  const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles[`icon-${contentColor}`], {
74
52
  [styles[`icon-${completeIconColor}`]]: completeIconColor,
75
53
  }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
76
54
  const renderContent = () => Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
77
55
  SIZES[size] > 24 && renderTitle(),
78
56
  SIZES[size] > 64 && renderSubTitle()));
79
- return (React.createElement("div", { className: cn(styles.component, styles[size], className), style: {
57
+ return (React.createElement("div", { className: cn(styles.component, styles[size], className, {
58
+ [styles[`bg-${view}`]]: fillComplete && isComplete,
59
+ }), style: {
80
60
  ...(height && { height, width: height }),
61
+ ...(circleColor && { backgroundColor: circleColor }),
81
62
  }, "data-test-id": dataTestId },
82
63
  React.createElement("svg", { viewBox: `0 0 ${memorized.widthSVG} ${memorized.heightSVG}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
83
64
  React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], {
84
65
  [styles.stroke]: !stroke,
85
- }), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
86
- React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size], {
87
- [styles[`bg-${view}`]]: fillComplete && isComplete,
88
- }), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
66
+ }), style: {
67
+ ...(strokeColor && stroke && { stroke: strokeColor }),
68
+ }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
69
+ React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size]), style: {
70
+ ...(progressStrokeColor && { stroke: progressStrokeColor }),
71
+ }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
89
72
  ? -memorized.strokeDashoffset
90
73
  : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
91
74
  React.createElement("div", { className: cn(styles.labelWrapper, {
package/modern/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/modern/consts.js ADDED
@@ -0,0 +1,35 @@
1
+ const SIZES = {
2
+ xs: 24,
3
+ s: 48,
4
+ m: 64,
5
+ l: 80,
6
+ xl: 128,
7
+ xxl: 144,
8
+ };
9
+ const STROKE = {
10
+ xs: 4,
11
+ s: 4,
12
+ m: 6,
13
+ l: 8,
14
+ xl: 10,
15
+ xxl: 12,
16
+ };
17
+ const VIEW_TITLE = {
18
+ xs: 'small',
19
+ s: 'small',
20
+ m: 'small',
21
+ l: 'xsmall',
22
+ xl: 'medium',
23
+ xxl: 'medium',
24
+ };
25
+ const 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
+ const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
34
+
35
+ export { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1a5wr */
1
+ /* hash: vkz5w */
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_q7chu {
40
+ } .circular-progress-bar__component_5iq0y {
40
41
  position: relative;
41
42
  display: flex;
42
43
  justify-content: center;
43
44
  align-items: center;
44
- } .circular-progress-bar__svg_q7chu {
45
+ border-radius: var(--border-radius-pill)
46
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-positive_5iq0y {
47
+ background: var(--circular-progress-bar-positive-color);
48
+ } .circular-progress-bar__component_5iq0y.circular-progress-bar__bg-negative_5iq0y {
49
+ background: var(--circular-progress-bar-negative-color);
50
+ } .circular-progress-bar__svg_5iq0y {
45
51
  display: block;
46
52
  width: 100%;
47
- } .circular-progress-bar__title_q7chu,
48
- .circular-progress-bar__subtitle_q7chu {
53
+ } .circular-progress-bar__title_5iq0y,
54
+ .circular-progress-bar__subtitle_5iq0y {
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_q7chu {
60
+ } .circular-progress-bar__subtitle_5iq0y {
55
61
  max-height: 40px;
56
- } .circular-progress-bar__labelWrapper_q7chu {
62
+ } .circular-progress-bar__labelWrapper_5iq0y {
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_q7chu.circular-progress-bar__label_q7chu {
69
+ } .circular-progress-bar__labelWrapper_5iq0y.circular-progress-bar__label_5iq0y {
64
70
  display: flex;
65
71
  align-items: center;
66
72
  justify-content: center;
67
- } .circular-progress-bar__typography_q7chu {
73
+ } .circular-progress-bar__typography_5iq0y {
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_q7chu {
77
+ } .circular-progress-bar__xxl_5iq0y {
72
78
  width: 144px;
73
79
  height: 144px
74
- } .circular-progress-bar__xxl_q7chu .circular-progress-bar__labelWrapper_q7chu {
80
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
75
81
  max-width: 128px;
76
- } .circular-progress-bar__xxl_q7chu .circular-progress-bar__title_q7chu {
82
+ } .circular-progress-bar__xxl_5iq0y .circular-progress-bar__title_5iq0y {
77
83
  max-height: 32px;
78
- } .circular-progress-bar__xl_q7chu {
84
+ } .circular-progress-bar__xl_5iq0y {
79
85
  width: 128px;
80
86
  height: 128px
81
- } .circular-progress-bar__xl_q7chu .circular-progress-bar__labelWrapper_q7chu {
87
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
82
88
  max-width: 108px;
83
- } .circular-progress-bar__xl_q7chu .circular-progress-bar__title_q7chu {
89
+ } .circular-progress-bar__xl_5iq0y .circular-progress-bar__title_5iq0y {
84
90
  max-height: 32px;
85
- } .circular-progress-bar__l_q7chu {
91
+ } .circular-progress-bar__l_5iq0y {
86
92
  width: 80px;
87
93
  height: 80px
88
- } .circular-progress-bar__l_q7chu .circular-progress-bar__labelWrapper_q7chu {
94
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
89
95
  max-width: 64px;
90
- } .circular-progress-bar__l_q7chu .circular-progress-bar__title_q7chu {
96
+ } .circular-progress-bar__l_5iq0y .circular-progress-bar__title_5iq0y {
91
97
  max-height: 24px;
92
- } .circular-progress-bar__m_q7chu {
98
+ } .circular-progress-bar__m_5iq0y {
93
99
  width: 64px;
94
100
  height: 64px
95
- } .circular-progress-bar__m_q7chu .circular-progress-bar__labelWrapper_q7chu {
101
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
96
102
  max-width: 48px;
97
- } .circular-progress-bar__m_q7chu .circular-progress-bar__title_q7chu {
103
+ } .circular-progress-bar__m_5iq0y .circular-progress-bar__title_5iq0y {
98
104
  max-height: 16px;
99
105
  margin: 0;
100
- } .circular-progress-bar__s_q7chu {
106
+ } .circular-progress-bar__s_5iq0y {
101
107
  width: 48px;
102
108
  height: 48px
103
- } .circular-progress-bar__s_q7chu .circular-progress-bar__labelWrapper_q7chu {
109
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
104
110
  max-width: 40px;
105
- } .circular-progress-bar__s_q7chu .circular-progress-bar__title_q7chu {
111
+ } .circular-progress-bar__s_5iq0y .circular-progress-bar__title_5iq0y {
106
112
  max-height: 16px;
107
113
  margin: 0;
108
- } .circular-progress-bar__xs_q7chu {
114
+ } .circular-progress-bar__xs_5iq0y {
109
115
  width: 24px;
110
116
  height: 24px
111
- } .circular-progress-bar__xs_q7chu .circular-progress-bar__labelWrapper_q7chu {
117
+ } .circular-progress-bar__xs_5iq0y .circular-progress-bar__labelWrapper_5iq0y {
112
118
  max-width: 24px;
113
- } .circular-progress-bar__backgroundCircle_q7chu,
114
- .circular-progress-bar__progressCircle_q7chu {
119
+ } .circular-progress-bar__backgroundCircle_5iq0y,
120
+ .circular-progress-bar__progressCircle_5iq0y {
115
121
  width: 100%;
116
122
  height: 100%;
117
123
  fill: transparent;
118
- } .circular-progress-bar__positive_q7chu {
124
+ } .circular-progress-bar__positive_5iq0y {
119
125
  stroke: var(--circular-progress-bar-positive-color);
120
- } .circular-progress-bar__negative_q7chu {
126
+ } .circular-progress-bar__negative_5iq0y {
121
127
  stroke: var(--circular-progress-bar-negative-color);
122
- } .circular-progress-bar__backgroundCircle_q7chu {
128
+ } .circular-progress-bar__backgroundCircle_5iq0y {
123
129
  stroke: var(--circular-progress-bar-stroke-color)
124
- } .circular-progress-bar__backgroundCircle_q7chu.circular-progress-bar__stroke_q7chu {
130
+ } .circular-progress-bar__backgroundCircle_5iq0y.circular-progress-bar__stroke_5iq0y {
125
131
  stroke: transparent;
126
- } .circular-progress-bar__progressCircle_q7chu {
127
- stroke-linecap: round
128
- } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-positive_q7chu {
129
- fill: var(--circular-progress-bar-positive-color);
130
- } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-negative_q7chu {
131
- fill: var(--circular-progress-bar-negative-color);
132
- } .circular-progress-bar__iconWrapper_q7chu {
132
+ } .circular-progress-bar__progressCircle_5iq0y {
133
+ stroke-linecap: round;
134
+ } .circular-progress-bar__iconWrapper_5iq0y {
133
135
  display: flex;
134
136
  align-items: center;
135
137
  justify-content: center
136
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xxl_q7chu {
138
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xxl_5iq0y {
137
139
  max-width: 64px;
138
140
  max-height: 64px;
139
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xl_q7chu {
141
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xl_5iq0y {
140
142
  max-width: 64px;
141
143
  max-height: 64px;
142
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__l_q7chu {
144
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__l_5iq0y {
143
145
  max-width: 48px;
144
146
  max-height: 48px;
145
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__m_q7chu {
147
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__m_5iq0y {
146
148
  max-width: 36px;
147
149
  max-height: 36px;
148
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__s_q7chu {
150
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__s_5iq0y {
149
151
  max-width: 24px;
150
152
  max-height: 24px;
151
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xs_q7chu {
153
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__xs_5iq0y {
152
154
  max-width: 16px;
153
155
  max-height: 16px;
154
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-tertiary_q7chu {
156
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-tertiary_5iq0y {
155
157
  color: var(--color-light-graphic-tertiary);
156
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-positive_q7chu {
158
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-positive_5iq0y {
157
159
  color: var(--color-light-graphic-positive);
158
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-negative_q7chu {
160
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-negative_5iq0y {
159
161
  color: var(--color-light-graphic-negative);
160
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary-inverted_q7chu {
162
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary-inverted_5iq0y {
161
163
  color: var(--color-light-graphic-primary-inverted);
162
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary_q7chu {
164
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-primary_5iq0y {
163
165
  color: var(--color-light-graphic-primary);
164
- } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-secondary_q7chu {
166
+ } .circular-progress-bar__iconWrapper_5iq0y.circular-progress-bar__icon-secondary_5iq0y {
165
167
  color: var(--color-light-graphic-secondary);
166
- } .circular-progress-bar__icon_q7chu {
168
+ } .circular-progress-bar__icon_5iq0y {
167
169
  width: 100%;
168
170
  height: 100%;
169
171
  }
package/modern/index.js CHANGED
@@ -2,3 +2,4 @@ export { CircularProgressBar } from './Component.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import '@alfalab/core-components-typography/modern';
5
+ import './consts.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.1.1",
3
+ "version": "3.3.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/src/Component.tsx CHANGED
@@ -3,43 +3,11 @@ import cn from 'classnames';
3
3
 
4
4
  import { Typography } from '@alfalab/core-components-typography';
5
5
 
6
- import styles from './index.module.css';
7
-
8
- const SIZES = {
9
- xs: 24,
10
- s: 48,
11
- m: 64,
12
- l: 80,
13
- xl: 128,
14
- xxl: 144,
15
- };
6
+ import { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE } from './consts';
16
7
 
17
- const STROKE = {
18
- xs: 4,
19
- s: 4,
20
- m: 6,
21
- l: 8,
22
- xl: 10,
23
- xxl: 12,
24
- };
8
+ import styles from './index.module.css';
25
9
 
26
- const VIEW_TITLE = {
27
- xs: 'small',
28
- s: 'small',
29
- m: 'small',
30
- l: 'xsmall',
31
- xl: 'medium',
32
- xxl: 'medium',
33
- } as const;
34
-
35
- const VIEW_TEXT = {
36
- xs: 'secondary-small',
37
- s: 'secondary-small',
38
- m: 'secondary-large',
39
- l: 'secondary-large',
40
- xl: 'secondary-large',
41
- xxl: 'secondary-large',
42
- } as const;
10
+ export type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
43
11
 
44
12
  export type CircularProgressBarProps = {
45
13
  /**
@@ -60,7 +28,7 @@ export type CircularProgressBarProps = {
60
28
  /**
61
29
  * Цвет контента
62
30
  */
63
- contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
31
+ contentColor?: TypographyColor | string;
64
32
 
65
33
  /**
66
34
  * Дополнительный текст
@@ -140,9 +108,24 @@ export type CircularProgressBarProps = {
140
108
  dataTestId?: string;
141
109
 
142
110
  /**
143
- * Дочерние элементы.
111
+ * Дочерние элементы
144
112
  */
145
113
  children?: ReactNode;
114
+
115
+ /**
116
+ * Цвет прогресса
117
+ */
118
+ progressStrokeColor?: string;
119
+
120
+ /**
121
+ * Цвет заливки внутри круга
122
+ */
123
+ circleColor?: string;
124
+
125
+ /**
126
+ * Цвет желоба
127
+ */
128
+ strokeColor?: string;
146
129
  };
147
130
 
148
131
  /**
@@ -168,6 +151,9 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
168
151
  direction = 'clockwise',
169
152
  height,
170
153
  children,
154
+ progressStrokeColor,
155
+ circleColor,
156
+ strokeColor,
171
157
  }) => {
172
158
  const memorized = useMemo(() => {
173
159
  const strokeWidth = STROKE[size];
@@ -197,25 +183,34 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
197
183
  const titleContent = titleComplete && isComplete ? titleComplete : title;
198
184
  const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
199
185
  const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
186
+ const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
187
+ ? (contentColor as TypographyColor)
188
+ : undefined;
200
189
 
201
190
  const renderTitleString = () =>
202
191
  SIZES[size] > 64 ? (
203
192
  <Typography.TitleMobile
204
193
  className={cn(styles.typography, styles.title)}
205
- color={isCompleteTextColor ? completeTextColor : contentColor}
194
+ color={isCompleteTextColor ? completeTextColor : typographyContentColor}
206
195
  tag='div'
207
196
  font='system'
208
197
  view={VIEW_TITLE[size]}
198
+ style={{
199
+ ...(!typographyContentColor && { color: contentColor }),
200
+ }}
209
201
  >
210
202
  {titleContent}
211
203
  </Typography.TitleMobile>
212
204
  ) : (
213
205
  <Typography.Text
214
206
  className={styles.title}
215
- color={isCompleteTextColor ? completeTextColor : contentColor}
207
+ color={isCompleteTextColor ? completeTextColor : typographyContentColor}
216
208
  tag='div'
217
209
  weight='bold'
218
210
  view={VIEW_TEXT[size]}
211
+ style={{
212
+ ...(!typographyContentColor && { color: contentColor }),
213
+ }}
219
214
  >
220
215
  {titleContent}
221
216
  </Typography.Text>
@@ -228,8 +223,11 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
228
223
  <Typography.Text
229
224
  tag='div'
230
225
  className={styles.subtitle}
231
- color={isCompleteTextColor ? completeTextColor : contentColor}
226
+ color={isCompleteTextColor ? completeTextColor : typographyContentColor}
232
227
  view='primary-small'
228
+ style={{
229
+ ...(!typographyContentColor && { color: contentColor }),
230
+ }}
233
231
  >
234
232
  {subtitleContent}
235
233
  </Typography.Text>
@@ -265,9 +263,12 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
265
263
 
266
264
  return (
267
265
  <div
268
- className={cn(styles.component, styles[size], className)}
266
+ className={cn(styles.component, styles[size], className, {
267
+ [styles[`bg-${view}`]]: fillComplete && isComplete,
268
+ })}
269
269
  style={{
270
270
  ...(height && { height, width: height }),
271
+ ...(circleColor && { backgroundColor: circleColor }),
271
272
  }}
272
273
  data-test-id={dataTestId}
273
274
  >
@@ -280,15 +281,19 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
280
281
  className={cn(styles.backgroundCircle, styles[size], {
281
282
  [styles.stroke]: !stroke,
282
283
  })}
284
+ style={{
285
+ ...(strokeColor && stroke && { stroke: strokeColor }),
286
+ }}
283
287
  cx={memorized.center}
284
288
  cy={memorized.center}
285
289
  r={memorized.radius}
286
290
  strokeWidth={STROKE[size]}
287
291
  />
288
292
  <circle
289
- className={cn(styles.progressCircle, styles[view], styles[size], {
290
- [styles[`bg-${view}`]]: fillComplete && isComplete,
291
- })}
293
+ className={cn(styles.progressCircle, styles[view], styles[size])}
294
+ style={{
295
+ ...(progressStrokeColor && { stroke: progressStrokeColor }),
296
+ }}
292
297
  cx={memorized.center}
293
298
  cy={memorized.center}
294
299
  r={memorized.radius}
package/src/consts.ts ADDED
@@ -0,0 +1,37 @@
1
+ export const SIZES = {
2
+ xs: 24,
3
+ s: 48,
4
+ m: 64,
5
+ l: 80,
6
+ xl: 128,
7
+ xxl: 144,
8
+ };
9
+
10
+ export const STROKE = {
11
+ xs: 4,
12
+ s: 4,
13
+ m: 6,
14
+ l: 8,
15
+ xl: 10,
16
+ xxl: 12,
17
+ };
18
+
19
+ export const VIEW_TITLE = {
20
+ xs: 'small',
21
+ s: 'small',
22
+ m: 'small',
23
+ l: 'xsmall',
24
+ xl: 'medium',
25
+ xxl: 'medium',
26
+ } as const;
27
+
28
+ export const VIEW_TEXT = {
29
+ xs: 'secondary-small',
30
+ s: 'secondary-small',
31
+ m: 'secondary-large',
32
+ l: 'secondary-large',
33
+ xl: 'secondary-large',
34
+ xxl: 'secondary-large',
35
+ } as const;
36
+
37
+ export const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
package/src/index.module.css CHANGED
@@ -20,6 +20,15 @@
20
20
  display: flex;
21
21
  justify-content: center;
22
22
  align-items: center;
23
+ border-radius: var(--border-radius-pill);
24
+
25
+ &.bg-positive {
26
+ background: var(--circular-progress-bar-positive-color);
27
+ }
28
+
29
+ &.bg-negative {
30
+ background: var(--circular-progress-bar-negative-color);
31
+ }
23
32
  }
24
33
 
25
34
  .svg {
@@ -162,14 +171,6 @@
162
171
 
163
172
  .progressCircle {
164
173
  stroke-linecap: round;
165
-
166
- &.bg-positive {
167
- fill: var(--circular-progress-bar-positive-color);
168
- }
169
-
170
- &.bg-negative {
171
- fill: var(--circular-progress-bar-negative-color);
172
- }
173
174
  }
174
175
 
175
176
  .iconWrapper {