@alfalab/core-components-circular-progress-bar 3.0.13 → 3.1.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 (10) hide show
  1. package/Component.js +1 -1
  2. package/esm/Component.js +1 -1
  3. package/esm/index.css +49 -49
  4. package/index.css +49 -49
  5. package/modern/Component.js +1 -1
  6. package/modern/index.css +49 -49
  7. package/package.json +2 -2
  8. package/src/Component.tsx +314 -0
  9. package/src/index.module.css +238 -0
  10. package/src/index.ts +1 -0
package/Component.js CHANGED
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
13
13
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
14
14
 
15
- var styles = {"component":"circular-progress-bar__component_koxwo","svg":"circular-progress-bar__svg_koxwo","title":"circular-progress-bar__title_koxwo","subtitle":"circular-progress-bar__subtitle_koxwo","labelWrapper":"circular-progress-bar__labelWrapper_koxwo","label":"circular-progress-bar__label_koxwo","typography":"circular-progress-bar__typography_koxwo","xxl":"circular-progress-bar__xxl_koxwo","xl":"circular-progress-bar__xl_koxwo","l":"circular-progress-bar__l_koxwo","m":"circular-progress-bar__m_koxwo","s":"circular-progress-bar__s_koxwo","xs":"circular-progress-bar__xs_koxwo","backgroundCircle":"circular-progress-bar__backgroundCircle_koxwo","progressCircle":"circular-progress-bar__progressCircle_koxwo","positive":"circular-progress-bar__positive_koxwo","negative":"circular-progress-bar__negative_koxwo","stroke":"circular-progress-bar__stroke_koxwo","bg-positive":"circular-progress-bar__bg-positive_koxwo","bg-negative":"circular-progress-bar__bg-negative_koxwo","iconWrapper":"circular-progress-bar__iconWrapper_koxwo","icon-tertiary":"circular-progress-bar__icon-tertiary_koxwo","icon-positive":"circular-progress-bar__icon-positive_koxwo","icon-negative":"circular-progress-bar__icon-negative_koxwo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_koxwo","icon-primary":"circular-progress-bar__icon-primary_koxwo","icon-secondary":"circular-progress-bar__icon-secondary_koxwo","icon":"circular-progress-bar__icon_koxwo"};
15
+ var 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"};
16
16
  require('./index.css')
17
17
 
18
18
  var SIZES = {
package/esm/Component.js CHANGED
@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { Typography } from '@alfalab/core-components-typography/esm';
5
5
 
6
- var styles = {"component":"circular-progress-bar__component_koxwo","svg":"circular-progress-bar__svg_koxwo","title":"circular-progress-bar__title_koxwo","subtitle":"circular-progress-bar__subtitle_koxwo","labelWrapper":"circular-progress-bar__labelWrapper_koxwo","label":"circular-progress-bar__label_koxwo","typography":"circular-progress-bar__typography_koxwo","xxl":"circular-progress-bar__xxl_koxwo","xl":"circular-progress-bar__xl_koxwo","l":"circular-progress-bar__l_koxwo","m":"circular-progress-bar__m_koxwo","s":"circular-progress-bar__s_koxwo","xs":"circular-progress-bar__xs_koxwo","backgroundCircle":"circular-progress-bar__backgroundCircle_koxwo","progressCircle":"circular-progress-bar__progressCircle_koxwo","positive":"circular-progress-bar__positive_koxwo","negative":"circular-progress-bar__negative_koxwo","stroke":"circular-progress-bar__stroke_koxwo","bg-positive":"circular-progress-bar__bg-positive_koxwo","bg-negative":"circular-progress-bar__bg-negative_koxwo","iconWrapper":"circular-progress-bar__iconWrapper_koxwo","icon-tertiary":"circular-progress-bar__icon-tertiary_koxwo","icon-positive":"circular-progress-bar__icon-positive_koxwo","icon-negative":"circular-progress-bar__icon-negative_koxwo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_koxwo","icon-primary":"circular-progress-bar__icon-primary_koxwo","icon-secondary":"circular-progress-bar__icon-secondary_koxwo","icon":"circular-progress-bar__icon_koxwo"};
6
+ var 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"};
7
7
  require('./index.css')
8
8
 
9
9
  var SIZES = {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 2fyhb */
1
+ /* hash: 1a5wr */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -36,134 +36,134 @@
36
36
  /* theme */
37
37
  --circular-progress-bar-font-family: var(--font-family-system);
38
38
  --circular-progress-bar-font-weight: 600;
39
- } .circular-progress-bar__component_koxwo {
39
+ } .circular-progress-bar__component_q7chu {
40
40
  position: relative;
41
41
  display: flex;
42
42
  justify-content: center;
43
43
  align-items: center;
44
- } .circular-progress-bar__svg_koxwo {
44
+ } .circular-progress-bar__svg_q7chu {
45
45
  display: block;
46
46
  width: 100%;
47
- } .circular-progress-bar__title_koxwo,
48
- .circular-progress-bar__subtitle_koxwo {
47
+ } .circular-progress-bar__title_q7chu,
48
+ .circular-progress-bar__subtitle_q7chu {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
- } .circular-progress-bar__subtitle_koxwo {
54
+ } .circular-progress-bar__subtitle_q7chu {
55
55
  max-height: 40px;
56
- } .circular-progress-bar__labelWrapper_koxwo {
56
+ } .circular-progress-bar__labelWrapper_q7chu {
57
57
  text-align: center;
58
58
  position: absolute;
59
59
  top: 50%;
60
60
  left: 50%;
61
61
  width: 100%;
62
62
  transform: translate(-50%, -50%)
63
- } .circular-progress-bar__labelWrapper_koxwo.circular-progress-bar__label_koxwo {
63
+ } .circular-progress-bar__labelWrapper_q7chu.circular-progress-bar__label_q7chu {
64
64
  display: flex;
65
65
  align-items: center;
66
66
  justify-content: center;
67
- } .circular-progress-bar__typography_koxwo {
67
+ } .circular-progress-bar__typography_q7chu {
68
68
  font-feature-settings: 'ss01';
69
69
  font-weight: var(--circular-progress-bar-font-weight);
70
70
  font-family: var(--circular-progress-bar-font-family);
71
- } .circular-progress-bar__xxl_koxwo {
71
+ } .circular-progress-bar__xxl_q7chu {
72
72
  width: 144px;
73
73
  height: 144px
74
- } .circular-progress-bar__xxl_koxwo .circular-progress-bar__labelWrapper_koxwo {
74
+ } .circular-progress-bar__xxl_q7chu .circular-progress-bar__labelWrapper_q7chu {
75
75
  max-width: 128px;
76
- } .circular-progress-bar__xxl_koxwo .circular-progress-bar__title_koxwo {
76
+ } .circular-progress-bar__xxl_q7chu .circular-progress-bar__title_q7chu {
77
77
  max-height: 32px;
78
- } .circular-progress-bar__xl_koxwo {
78
+ } .circular-progress-bar__xl_q7chu {
79
79
  width: 128px;
80
80
  height: 128px
81
- } .circular-progress-bar__xl_koxwo .circular-progress-bar__labelWrapper_koxwo {
81
+ } .circular-progress-bar__xl_q7chu .circular-progress-bar__labelWrapper_q7chu {
82
82
  max-width: 108px;
83
- } .circular-progress-bar__xl_koxwo .circular-progress-bar__title_koxwo {
83
+ } .circular-progress-bar__xl_q7chu .circular-progress-bar__title_q7chu {
84
84
  max-height: 32px;
85
- } .circular-progress-bar__l_koxwo {
85
+ } .circular-progress-bar__l_q7chu {
86
86
  width: 80px;
87
87
  height: 80px
88
- } .circular-progress-bar__l_koxwo .circular-progress-bar__labelWrapper_koxwo {
88
+ } .circular-progress-bar__l_q7chu .circular-progress-bar__labelWrapper_q7chu {
89
89
  max-width: 64px;
90
- } .circular-progress-bar__l_koxwo .circular-progress-bar__title_koxwo {
90
+ } .circular-progress-bar__l_q7chu .circular-progress-bar__title_q7chu {
91
91
  max-height: 24px;
92
- } .circular-progress-bar__m_koxwo {
92
+ } .circular-progress-bar__m_q7chu {
93
93
  width: 64px;
94
94
  height: 64px
95
- } .circular-progress-bar__m_koxwo .circular-progress-bar__labelWrapper_koxwo {
95
+ } .circular-progress-bar__m_q7chu .circular-progress-bar__labelWrapper_q7chu {
96
96
  max-width: 48px;
97
- } .circular-progress-bar__m_koxwo .circular-progress-bar__title_koxwo {
97
+ } .circular-progress-bar__m_q7chu .circular-progress-bar__title_q7chu {
98
98
  max-height: 16px;
99
99
  margin: 0;
100
- } .circular-progress-bar__s_koxwo {
100
+ } .circular-progress-bar__s_q7chu {
101
101
  width: 48px;
102
102
  height: 48px
103
- } .circular-progress-bar__s_koxwo .circular-progress-bar__labelWrapper_koxwo {
103
+ } .circular-progress-bar__s_q7chu .circular-progress-bar__labelWrapper_q7chu {
104
104
  max-width: 40px;
105
- } .circular-progress-bar__s_koxwo .circular-progress-bar__title_koxwo {
105
+ } .circular-progress-bar__s_q7chu .circular-progress-bar__title_q7chu {
106
106
  max-height: 16px;
107
107
  margin: 0;
108
- } .circular-progress-bar__xs_koxwo {
108
+ } .circular-progress-bar__xs_q7chu {
109
109
  width: 24px;
110
110
  height: 24px
111
- } .circular-progress-bar__xs_koxwo .circular-progress-bar__labelWrapper_koxwo {
111
+ } .circular-progress-bar__xs_q7chu .circular-progress-bar__labelWrapper_q7chu {
112
112
  max-width: 24px;
113
- } .circular-progress-bar__backgroundCircle_koxwo,
114
- .circular-progress-bar__progressCircle_koxwo {
113
+ } .circular-progress-bar__backgroundCircle_q7chu,
114
+ .circular-progress-bar__progressCircle_q7chu {
115
115
  width: 100%;
116
116
  height: 100%;
117
117
  fill: transparent;
118
- } .circular-progress-bar__positive_koxwo {
118
+ } .circular-progress-bar__positive_q7chu {
119
119
  stroke: var(--circular-progress-bar-positive-color);
120
- } .circular-progress-bar__negative_koxwo {
120
+ } .circular-progress-bar__negative_q7chu {
121
121
  stroke: var(--circular-progress-bar-negative-color);
122
- } .circular-progress-bar__backgroundCircle_koxwo {
122
+ } .circular-progress-bar__backgroundCircle_q7chu {
123
123
  stroke: var(--circular-progress-bar-stroke-color)
124
- } .circular-progress-bar__backgroundCircle_koxwo.circular-progress-bar__stroke_koxwo {
124
+ } .circular-progress-bar__backgroundCircle_q7chu.circular-progress-bar__stroke_q7chu {
125
125
  stroke: transparent;
126
- } .circular-progress-bar__progressCircle_koxwo {
126
+ } .circular-progress-bar__progressCircle_q7chu {
127
127
  stroke-linecap: round
128
- } .circular-progress-bar__progressCircle_koxwo.circular-progress-bar__bg-positive_koxwo {
128
+ } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-positive_q7chu {
129
129
  fill: var(--circular-progress-bar-positive-color);
130
- } .circular-progress-bar__progressCircle_koxwo.circular-progress-bar__bg-negative_koxwo {
130
+ } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-negative_q7chu {
131
131
  fill: var(--circular-progress-bar-negative-color);
132
- } .circular-progress-bar__iconWrapper_koxwo {
132
+ } .circular-progress-bar__iconWrapper_q7chu {
133
133
  display: flex;
134
134
  align-items: center;
135
135
  justify-content: center
136
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xxl_koxwo {
136
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xxl_q7chu {
137
137
  max-width: 64px;
138
138
  max-height: 64px;
139
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xl_koxwo {
139
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xl_q7chu {
140
140
  max-width: 64px;
141
141
  max-height: 64px;
142
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__l_koxwo {
142
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__l_q7chu {
143
143
  max-width: 48px;
144
144
  max-height: 48px;
145
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__m_koxwo {
145
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__m_q7chu {
146
146
  max-width: 36px;
147
147
  max-height: 36px;
148
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__s_koxwo {
148
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__s_q7chu {
149
149
  max-width: 24px;
150
150
  max-height: 24px;
151
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xs_koxwo {
151
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xs_q7chu {
152
152
  max-width: 16px;
153
153
  max-height: 16px;
154
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-tertiary_koxwo {
154
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-tertiary_q7chu {
155
155
  color: var(--color-light-graphic-tertiary);
156
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-positive_koxwo {
156
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-positive_q7chu {
157
157
  color: var(--color-light-graphic-positive);
158
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-negative_koxwo {
158
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-negative_q7chu {
159
159
  color: var(--color-light-graphic-negative);
160
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-primary-inverted_koxwo {
160
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary-inverted_q7chu {
161
161
  color: var(--color-light-graphic-primary-inverted);
162
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-primary_koxwo {
162
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary_q7chu {
163
163
  color: var(--color-light-graphic-primary);
164
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-secondary_koxwo {
164
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-secondary_q7chu {
165
165
  color: var(--color-light-graphic-secondary);
166
- } .circular-progress-bar__icon_koxwo {
166
+ } .circular-progress-bar__icon_q7chu {
167
167
  width: 100%;
168
168
  height: 100%;
169
169
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 2fyhb */
1
+ /* hash: 1a5wr */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -36,134 +36,134 @@
36
36
  /* theme */
37
37
  --circular-progress-bar-font-family: var(--font-family-system);
38
38
  --circular-progress-bar-font-weight: 600;
39
- } .circular-progress-bar__component_koxwo {
39
+ } .circular-progress-bar__component_q7chu {
40
40
  position: relative;
41
41
  display: flex;
42
42
  justify-content: center;
43
43
  align-items: center;
44
- } .circular-progress-bar__svg_koxwo {
44
+ } .circular-progress-bar__svg_q7chu {
45
45
  display: block;
46
46
  width: 100%;
47
- } .circular-progress-bar__title_koxwo,
48
- .circular-progress-bar__subtitle_koxwo {
47
+ } .circular-progress-bar__title_q7chu,
48
+ .circular-progress-bar__subtitle_q7chu {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
- } .circular-progress-bar__subtitle_koxwo {
54
+ } .circular-progress-bar__subtitle_q7chu {
55
55
  max-height: 40px;
56
- } .circular-progress-bar__labelWrapper_koxwo {
56
+ } .circular-progress-bar__labelWrapper_q7chu {
57
57
  text-align: center;
58
58
  position: absolute;
59
59
  top: 50%;
60
60
  left: 50%;
61
61
  width: 100%;
62
62
  transform: translate(-50%, -50%)
63
- } .circular-progress-bar__labelWrapper_koxwo.circular-progress-bar__label_koxwo {
63
+ } .circular-progress-bar__labelWrapper_q7chu.circular-progress-bar__label_q7chu {
64
64
  display: flex;
65
65
  align-items: center;
66
66
  justify-content: center;
67
- } .circular-progress-bar__typography_koxwo {
67
+ } .circular-progress-bar__typography_q7chu {
68
68
  font-feature-settings: 'ss01';
69
69
  font-weight: var(--circular-progress-bar-font-weight);
70
70
  font-family: var(--circular-progress-bar-font-family);
71
- } .circular-progress-bar__xxl_koxwo {
71
+ } .circular-progress-bar__xxl_q7chu {
72
72
  width: 144px;
73
73
  height: 144px
74
- } .circular-progress-bar__xxl_koxwo .circular-progress-bar__labelWrapper_koxwo {
74
+ } .circular-progress-bar__xxl_q7chu .circular-progress-bar__labelWrapper_q7chu {
75
75
  max-width: 128px;
76
- } .circular-progress-bar__xxl_koxwo .circular-progress-bar__title_koxwo {
76
+ } .circular-progress-bar__xxl_q7chu .circular-progress-bar__title_q7chu {
77
77
  max-height: 32px;
78
- } .circular-progress-bar__xl_koxwo {
78
+ } .circular-progress-bar__xl_q7chu {
79
79
  width: 128px;
80
80
  height: 128px
81
- } .circular-progress-bar__xl_koxwo .circular-progress-bar__labelWrapper_koxwo {
81
+ } .circular-progress-bar__xl_q7chu .circular-progress-bar__labelWrapper_q7chu {
82
82
  max-width: 108px;
83
- } .circular-progress-bar__xl_koxwo .circular-progress-bar__title_koxwo {
83
+ } .circular-progress-bar__xl_q7chu .circular-progress-bar__title_q7chu {
84
84
  max-height: 32px;
85
- } .circular-progress-bar__l_koxwo {
85
+ } .circular-progress-bar__l_q7chu {
86
86
  width: 80px;
87
87
  height: 80px
88
- } .circular-progress-bar__l_koxwo .circular-progress-bar__labelWrapper_koxwo {
88
+ } .circular-progress-bar__l_q7chu .circular-progress-bar__labelWrapper_q7chu {
89
89
  max-width: 64px;
90
- } .circular-progress-bar__l_koxwo .circular-progress-bar__title_koxwo {
90
+ } .circular-progress-bar__l_q7chu .circular-progress-bar__title_q7chu {
91
91
  max-height: 24px;
92
- } .circular-progress-bar__m_koxwo {
92
+ } .circular-progress-bar__m_q7chu {
93
93
  width: 64px;
94
94
  height: 64px
95
- } .circular-progress-bar__m_koxwo .circular-progress-bar__labelWrapper_koxwo {
95
+ } .circular-progress-bar__m_q7chu .circular-progress-bar__labelWrapper_q7chu {
96
96
  max-width: 48px;
97
- } .circular-progress-bar__m_koxwo .circular-progress-bar__title_koxwo {
97
+ } .circular-progress-bar__m_q7chu .circular-progress-bar__title_q7chu {
98
98
  max-height: 16px;
99
99
  margin: 0;
100
- } .circular-progress-bar__s_koxwo {
100
+ } .circular-progress-bar__s_q7chu {
101
101
  width: 48px;
102
102
  height: 48px
103
- } .circular-progress-bar__s_koxwo .circular-progress-bar__labelWrapper_koxwo {
103
+ } .circular-progress-bar__s_q7chu .circular-progress-bar__labelWrapper_q7chu {
104
104
  max-width: 40px;
105
- } .circular-progress-bar__s_koxwo .circular-progress-bar__title_koxwo {
105
+ } .circular-progress-bar__s_q7chu .circular-progress-bar__title_q7chu {
106
106
  max-height: 16px;
107
107
  margin: 0;
108
- } .circular-progress-bar__xs_koxwo {
108
+ } .circular-progress-bar__xs_q7chu {
109
109
  width: 24px;
110
110
  height: 24px
111
- } .circular-progress-bar__xs_koxwo .circular-progress-bar__labelWrapper_koxwo {
111
+ } .circular-progress-bar__xs_q7chu .circular-progress-bar__labelWrapper_q7chu {
112
112
  max-width: 24px;
113
- } .circular-progress-bar__backgroundCircle_koxwo,
114
- .circular-progress-bar__progressCircle_koxwo {
113
+ } .circular-progress-bar__backgroundCircle_q7chu,
114
+ .circular-progress-bar__progressCircle_q7chu {
115
115
  width: 100%;
116
116
  height: 100%;
117
117
  fill: transparent;
118
- } .circular-progress-bar__positive_koxwo {
118
+ } .circular-progress-bar__positive_q7chu {
119
119
  stroke: var(--circular-progress-bar-positive-color);
120
- } .circular-progress-bar__negative_koxwo {
120
+ } .circular-progress-bar__negative_q7chu {
121
121
  stroke: var(--circular-progress-bar-negative-color);
122
- } .circular-progress-bar__backgroundCircle_koxwo {
122
+ } .circular-progress-bar__backgroundCircle_q7chu {
123
123
  stroke: var(--circular-progress-bar-stroke-color)
124
- } .circular-progress-bar__backgroundCircle_koxwo.circular-progress-bar__stroke_koxwo {
124
+ } .circular-progress-bar__backgroundCircle_q7chu.circular-progress-bar__stroke_q7chu {
125
125
  stroke: transparent;
126
- } .circular-progress-bar__progressCircle_koxwo {
126
+ } .circular-progress-bar__progressCircle_q7chu {
127
127
  stroke-linecap: round
128
- } .circular-progress-bar__progressCircle_koxwo.circular-progress-bar__bg-positive_koxwo {
128
+ } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-positive_q7chu {
129
129
  fill: var(--circular-progress-bar-positive-color);
130
- } .circular-progress-bar__progressCircle_koxwo.circular-progress-bar__bg-negative_koxwo {
130
+ } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-negative_q7chu {
131
131
  fill: var(--circular-progress-bar-negative-color);
132
- } .circular-progress-bar__iconWrapper_koxwo {
132
+ } .circular-progress-bar__iconWrapper_q7chu {
133
133
  display: flex;
134
134
  align-items: center;
135
135
  justify-content: center
136
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xxl_koxwo {
136
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xxl_q7chu {
137
137
  max-width: 64px;
138
138
  max-height: 64px;
139
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xl_koxwo {
139
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xl_q7chu {
140
140
  max-width: 64px;
141
141
  max-height: 64px;
142
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__l_koxwo {
142
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__l_q7chu {
143
143
  max-width: 48px;
144
144
  max-height: 48px;
145
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__m_koxwo {
145
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__m_q7chu {
146
146
  max-width: 36px;
147
147
  max-height: 36px;
148
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__s_koxwo {
148
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__s_q7chu {
149
149
  max-width: 24px;
150
150
  max-height: 24px;
151
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xs_koxwo {
151
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xs_q7chu {
152
152
  max-width: 16px;
153
153
  max-height: 16px;
154
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-tertiary_koxwo {
154
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-tertiary_q7chu {
155
155
  color: var(--color-light-graphic-tertiary);
156
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-positive_koxwo {
156
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-positive_q7chu {
157
157
  color: var(--color-light-graphic-positive);
158
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-negative_koxwo {
158
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-negative_q7chu {
159
159
  color: var(--color-light-graphic-negative);
160
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-primary-inverted_koxwo {
160
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary-inverted_q7chu {
161
161
  color: var(--color-light-graphic-primary-inverted);
162
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-primary_koxwo {
162
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary_q7chu {
163
163
  color: var(--color-light-graphic-primary);
164
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-secondary_koxwo {
164
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-secondary_q7chu {
165
165
  color: var(--color-light-graphic-secondary);
166
- } .circular-progress-bar__icon_koxwo {
166
+ } .circular-progress-bar__icon_q7chu {
167
167
  width: 100%;
168
168
  height: 100%;
169
169
  }
package/modern/Component.js CHANGED
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
4
 
5
- const styles = {"component":"circular-progress-bar__component_koxwo","svg":"circular-progress-bar__svg_koxwo","title":"circular-progress-bar__title_koxwo","subtitle":"circular-progress-bar__subtitle_koxwo","labelWrapper":"circular-progress-bar__labelWrapper_koxwo","label":"circular-progress-bar__label_koxwo","typography":"circular-progress-bar__typography_koxwo","xxl":"circular-progress-bar__xxl_koxwo","xl":"circular-progress-bar__xl_koxwo","l":"circular-progress-bar__l_koxwo","m":"circular-progress-bar__m_koxwo","s":"circular-progress-bar__s_koxwo","xs":"circular-progress-bar__xs_koxwo","backgroundCircle":"circular-progress-bar__backgroundCircle_koxwo","progressCircle":"circular-progress-bar__progressCircle_koxwo","positive":"circular-progress-bar__positive_koxwo","negative":"circular-progress-bar__negative_koxwo","stroke":"circular-progress-bar__stroke_koxwo","bg-positive":"circular-progress-bar__bg-positive_koxwo","bg-negative":"circular-progress-bar__bg-negative_koxwo","iconWrapper":"circular-progress-bar__iconWrapper_koxwo","icon-tertiary":"circular-progress-bar__icon-tertiary_koxwo","icon-positive":"circular-progress-bar__icon-positive_koxwo","icon-negative":"circular-progress-bar__icon-negative_koxwo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_koxwo","icon-primary":"circular-progress-bar__icon-primary_koxwo","icon-secondary":"circular-progress-bar__icon-secondary_koxwo","icon":"circular-progress-bar__icon_koxwo"};
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
6
  require('./index.css')
7
7
 
8
8
  const SIZES = {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 2fyhb */
1
+ /* hash: 1a5wr */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -36,134 +36,134 @@
36
36
  /* theme */
37
37
  --circular-progress-bar-font-family: var(--font-family-system);
38
38
  --circular-progress-bar-font-weight: 600;
39
- } .circular-progress-bar__component_koxwo {
39
+ } .circular-progress-bar__component_q7chu {
40
40
  position: relative;
41
41
  display: flex;
42
42
  justify-content: center;
43
43
  align-items: center;
44
- } .circular-progress-bar__svg_koxwo {
44
+ } .circular-progress-bar__svg_q7chu {
45
45
  display: block;
46
46
  width: 100%;
47
- } .circular-progress-bar__title_koxwo,
48
- .circular-progress-bar__subtitle_koxwo {
47
+ } .circular-progress-bar__title_q7chu,
48
+ .circular-progress-bar__subtitle_q7chu {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
- } .circular-progress-bar__subtitle_koxwo {
54
+ } .circular-progress-bar__subtitle_q7chu {
55
55
  max-height: 40px;
56
- } .circular-progress-bar__labelWrapper_koxwo {
56
+ } .circular-progress-bar__labelWrapper_q7chu {
57
57
  text-align: center;
58
58
  position: absolute;
59
59
  top: 50%;
60
60
  left: 50%;
61
61
  width: 100%;
62
62
  transform: translate(-50%, -50%)
63
- } .circular-progress-bar__labelWrapper_koxwo.circular-progress-bar__label_koxwo {
63
+ } .circular-progress-bar__labelWrapper_q7chu.circular-progress-bar__label_q7chu {
64
64
  display: flex;
65
65
  align-items: center;
66
66
  justify-content: center;
67
- } .circular-progress-bar__typography_koxwo {
67
+ } .circular-progress-bar__typography_q7chu {
68
68
  font-feature-settings: 'ss01';
69
69
  font-weight: var(--circular-progress-bar-font-weight);
70
70
  font-family: var(--circular-progress-bar-font-family);
71
- } .circular-progress-bar__xxl_koxwo {
71
+ } .circular-progress-bar__xxl_q7chu {
72
72
  width: 144px;
73
73
  height: 144px
74
- } .circular-progress-bar__xxl_koxwo .circular-progress-bar__labelWrapper_koxwo {
74
+ } .circular-progress-bar__xxl_q7chu .circular-progress-bar__labelWrapper_q7chu {
75
75
  max-width: 128px;
76
- } .circular-progress-bar__xxl_koxwo .circular-progress-bar__title_koxwo {
76
+ } .circular-progress-bar__xxl_q7chu .circular-progress-bar__title_q7chu {
77
77
  max-height: 32px;
78
- } .circular-progress-bar__xl_koxwo {
78
+ } .circular-progress-bar__xl_q7chu {
79
79
  width: 128px;
80
80
  height: 128px
81
- } .circular-progress-bar__xl_koxwo .circular-progress-bar__labelWrapper_koxwo {
81
+ } .circular-progress-bar__xl_q7chu .circular-progress-bar__labelWrapper_q7chu {
82
82
  max-width: 108px;
83
- } .circular-progress-bar__xl_koxwo .circular-progress-bar__title_koxwo {
83
+ } .circular-progress-bar__xl_q7chu .circular-progress-bar__title_q7chu {
84
84
  max-height: 32px;
85
- } .circular-progress-bar__l_koxwo {
85
+ } .circular-progress-bar__l_q7chu {
86
86
  width: 80px;
87
87
  height: 80px
88
- } .circular-progress-bar__l_koxwo .circular-progress-bar__labelWrapper_koxwo {
88
+ } .circular-progress-bar__l_q7chu .circular-progress-bar__labelWrapper_q7chu {
89
89
  max-width: 64px;
90
- } .circular-progress-bar__l_koxwo .circular-progress-bar__title_koxwo {
90
+ } .circular-progress-bar__l_q7chu .circular-progress-bar__title_q7chu {
91
91
  max-height: 24px;
92
- } .circular-progress-bar__m_koxwo {
92
+ } .circular-progress-bar__m_q7chu {
93
93
  width: 64px;
94
94
  height: 64px
95
- } .circular-progress-bar__m_koxwo .circular-progress-bar__labelWrapper_koxwo {
95
+ } .circular-progress-bar__m_q7chu .circular-progress-bar__labelWrapper_q7chu {
96
96
  max-width: 48px;
97
- } .circular-progress-bar__m_koxwo .circular-progress-bar__title_koxwo {
97
+ } .circular-progress-bar__m_q7chu .circular-progress-bar__title_q7chu {
98
98
  max-height: 16px;
99
99
  margin: 0;
100
- } .circular-progress-bar__s_koxwo {
100
+ } .circular-progress-bar__s_q7chu {
101
101
  width: 48px;
102
102
  height: 48px
103
- } .circular-progress-bar__s_koxwo .circular-progress-bar__labelWrapper_koxwo {
103
+ } .circular-progress-bar__s_q7chu .circular-progress-bar__labelWrapper_q7chu {
104
104
  max-width: 40px;
105
- } .circular-progress-bar__s_koxwo .circular-progress-bar__title_koxwo {
105
+ } .circular-progress-bar__s_q7chu .circular-progress-bar__title_q7chu {
106
106
  max-height: 16px;
107
107
  margin: 0;
108
- } .circular-progress-bar__xs_koxwo {
108
+ } .circular-progress-bar__xs_q7chu {
109
109
  width: 24px;
110
110
  height: 24px
111
- } .circular-progress-bar__xs_koxwo .circular-progress-bar__labelWrapper_koxwo {
111
+ } .circular-progress-bar__xs_q7chu .circular-progress-bar__labelWrapper_q7chu {
112
112
  max-width: 24px;
113
- } .circular-progress-bar__backgroundCircle_koxwo,
114
- .circular-progress-bar__progressCircle_koxwo {
113
+ } .circular-progress-bar__backgroundCircle_q7chu,
114
+ .circular-progress-bar__progressCircle_q7chu {
115
115
  width: 100%;
116
116
  height: 100%;
117
117
  fill: transparent;
118
- } .circular-progress-bar__positive_koxwo {
118
+ } .circular-progress-bar__positive_q7chu {
119
119
  stroke: var(--circular-progress-bar-positive-color);
120
- } .circular-progress-bar__negative_koxwo {
120
+ } .circular-progress-bar__negative_q7chu {
121
121
  stroke: var(--circular-progress-bar-negative-color);
122
- } .circular-progress-bar__backgroundCircle_koxwo {
122
+ } .circular-progress-bar__backgroundCircle_q7chu {
123
123
  stroke: var(--circular-progress-bar-stroke-color)
124
- } .circular-progress-bar__backgroundCircle_koxwo.circular-progress-bar__stroke_koxwo {
124
+ } .circular-progress-bar__backgroundCircle_q7chu.circular-progress-bar__stroke_q7chu {
125
125
  stroke: transparent;
126
- } .circular-progress-bar__progressCircle_koxwo {
126
+ } .circular-progress-bar__progressCircle_q7chu {
127
127
  stroke-linecap: round
128
- } .circular-progress-bar__progressCircle_koxwo.circular-progress-bar__bg-positive_koxwo {
128
+ } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-positive_q7chu {
129
129
  fill: var(--circular-progress-bar-positive-color);
130
- } .circular-progress-bar__progressCircle_koxwo.circular-progress-bar__bg-negative_koxwo {
130
+ } .circular-progress-bar__progressCircle_q7chu.circular-progress-bar__bg-negative_q7chu {
131
131
  fill: var(--circular-progress-bar-negative-color);
132
- } .circular-progress-bar__iconWrapper_koxwo {
132
+ } .circular-progress-bar__iconWrapper_q7chu {
133
133
  display: flex;
134
134
  align-items: center;
135
135
  justify-content: center
136
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xxl_koxwo {
136
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xxl_q7chu {
137
137
  max-width: 64px;
138
138
  max-height: 64px;
139
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xl_koxwo {
139
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xl_q7chu {
140
140
  max-width: 64px;
141
141
  max-height: 64px;
142
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__l_koxwo {
142
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__l_q7chu {
143
143
  max-width: 48px;
144
144
  max-height: 48px;
145
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__m_koxwo {
145
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__m_q7chu {
146
146
  max-width: 36px;
147
147
  max-height: 36px;
148
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__s_koxwo {
148
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__s_q7chu {
149
149
  max-width: 24px;
150
150
  max-height: 24px;
151
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__xs_koxwo {
151
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__xs_q7chu {
152
152
  max-width: 16px;
153
153
  max-height: 16px;
154
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-tertiary_koxwo {
154
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-tertiary_q7chu {
155
155
  color: var(--color-light-graphic-tertiary);
156
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-positive_koxwo {
156
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-positive_q7chu {
157
157
  color: var(--color-light-graphic-positive);
158
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-negative_koxwo {
158
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-negative_q7chu {
159
159
  color: var(--color-light-graphic-negative);
160
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-primary-inverted_koxwo {
160
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary-inverted_q7chu {
161
161
  color: var(--color-light-graphic-primary-inverted);
162
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-primary_koxwo {
162
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-primary_q7chu {
163
163
  color: var(--color-light-graphic-primary);
164
- } .circular-progress-bar__iconWrapper_koxwo.circular-progress-bar__icon-secondary_koxwo {
164
+ } .circular-progress-bar__iconWrapper_q7chu.circular-progress-bar__icon-secondary_q7chu {
165
165
  color: var(--color-light-graphic-secondary);
166
- } .circular-progress-bar__icon_koxwo {
166
+ } .circular-progress-bar__icon_q7chu {
167
167
  width: 100%;
168
168
  height: 100%;
169
169
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.0.13",
3
+ "version": "3.1.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -11,7 +11,7 @@
11
11
  "directory": "dist"
12
12
  },
13
13
  "dependencies": {
14
- "@alfalab/core-components-typography": "^3.2.2",
14
+ "@alfalab/core-components-typography": "^4.1.0",
15
15
  "classnames": "^2.3.1",
16
16
  "tslib": "^2.4.0"
17
17
  },
package/src/Component.tsx ADDED
@@ -0,0 +1,314 @@
1
+ import React, { ElementType, ReactNode, useMemo } from 'react';
2
+ import cn from 'classnames';
3
+
4
+ import { Typography } from '@alfalab/core-components-typography';
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
+ };
16
+
17
+ const STROKE = {
18
+ xs: 4,
19
+ s: 4,
20
+ m: 6,
21
+ l: 8,
22
+ xl: 10,
23
+ xxl: 12,
24
+ };
25
+
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;
43
+
44
+ export type CircularProgressBarProps = {
45
+ /**
46
+ * Уровень прогресса, %
47
+ */
48
+ value: number;
49
+
50
+ /**
51
+ * Дополнительный класс
52
+ */
53
+ className?: string;
54
+
55
+ /**
56
+ * Основной текст
57
+ */
58
+ title?: ReactNode;
59
+
60
+ /**
61
+ * Цвет контента
62
+ */
63
+ contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
64
+
65
+ /**
66
+ * Дополнительный текст
67
+ */
68
+ subtitle?: ReactNode;
69
+
70
+ /**
71
+ * Основной текст при 100%
72
+ */
73
+ titleComplete?: ReactNode;
74
+
75
+ /**
76
+ * Дополнительный текст при 100%
77
+ */
78
+ subtitleComplete?: ReactNode;
79
+
80
+ /**
81
+ * Цвет заполнения
82
+ */
83
+ view?: 'positive' | 'negative';
84
+
85
+ /**
86
+ * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
87
+ */
88
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
89
+
90
+ /**
91
+ * Наличие желоба
92
+ */
93
+ stroke?: boolean;
94
+
95
+ /**
96
+ * Заливка при 100%
97
+ */
98
+ fillComplete?: boolean;
99
+
100
+ /**
101
+ * Цвет текста при 100%
102
+ */
103
+ completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
104
+
105
+ /**
106
+ * Цвет иконки при 100%
107
+ */
108
+ completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
109
+
110
+ /**
111
+ * Компонент иконки
112
+ */
113
+ icon?: ElementType<{ className?: string }>;
114
+
115
+ /**
116
+ * Компонент иконки при 100%
117
+ */
118
+ iconComplete?: ElementType<{ className?: string }>;
119
+
120
+ /**
121
+ * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
122
+ */
123
+ direction?: 'clockwise' | 'counter-clockwise';
124
+
125
+ /**
126
+ * Высота компонента, min = 24; max = 144
127
+ * использовать совместно с size :
128
+ * xxl от 144
129
+ * xl от 128 до 143
130
+ * l от 80 до 127
131
+ * m от 64 до 79
132
+ * s от 48 до 63
133
+ * xs от 24 до 47
134
+ */
135
+ height?: number;
136
+
137
+ /**
138
+ * Id компонента для тестов
139
+ */
140
+ dataTestId?: string;
141
+
142
+ /**
143
+ * Дочерние элементы.
144
+ */
145
+ children?: ReactNode;
146
+ };
147
+
148
+ /**
149
+ * Компонент круглого прогресс бара.
150
+ */
151
+ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
152
+ value,
153
+ view = 'positive',
154
+ size = 'm',
155
+ className,
156
+ dataTestId,
157
+ title = value ? value.toString() : '0',
158
+ titleComplete,
159
+ subtitle,
160
+ contentColor = 'secondary',
161
+ subtitleComplete,
162
+ stroke = true,
163
+ fillComplete,
164
+ icon: Icon,
165
+ iconComplete: IconComplete,
166
+ completeTextColor,
167
+ completeIconColor = 'tertiary',
168
+ direction = 'clockwise',
169
+ height,
170
+ children,
171
+ }) => {
172
+ const memorized = useMemo(() => {
173
+ const strokeWidth = STROKE[size];
174
+ const maxProgress = 100;
175
+ const minProgress = 0;
176
+ const widthSVG = SIZES[size];
177
+ const heightSVG = SIZES[size];
178
+ const center = widthSVG / 2;
179
+ const radius = center - strokeWidth / 2;
180
+ const circumference = Math.PI * radius * 2;
181
+ const progress = Math.min(Math.max(value, minProgress), maxProgress);
182
+ const strokeDasharray = circumference.toFixed(3);
183
+ const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
184
+
185
+ return {
186
+ widthSVG,
187
+ heightSVG,
188
+ center,
189
+ radius,
190
+ strokeDasharray,
191
+ strokeDashoffset,
192
+ };
193
+ }, [value, size]);
194
+
195
+ const isComplete = value === 100;
196
+ const isCompleteTextColor = isComplete && completeTextColor;
197
+ const titleContent = titleComplete && isComplete ? titleComplete : title;
198
+ const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
199
+ const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
200
+
201
+ const renderTitleString = () =>
202
+ SIZES[size] > 64 ? (
203
+ <Typography.TitleMobile
204
+ className={cn(styles.typography, styles.title)}
205
+ color={isCompleteTextColor ? completeTextColor : contentColor}
206
+ tag='div'
207
+ font='system'
208
+ view={VIEW_TITLE[size]}
209
+ >
210
+ {titleContent}
211
+ </Typography.TitleMobile>
212
+ ) : (
213
+ <Typography.Text
214
+ className={styles.title}
215
+ color={isCompleteTextColor ? completeTextColor : contentColor}
216
+ tag='div'
217
+ weight='bold'
218
+ view={VIEW_TEXT[size]}
219
+ >
220
+ {titleContent}
221
+ </Typography.Text>
222
+ );
223
+
224
+ const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
225
+
226
+ const renderSubTitle = () =>
227
+ typeof subtitle === 'string' ? (
228
+ <Typography.Text
229
+ tag='div'
230
+ className={styles.subtitle}
231
+ color={isCompleteTextColor ? completeTextColor : contentColor}
232
+ view='primary-small'
233
+ >
234
+ {subtitleContent}
235
+ </Typography.Text>
236
+ ) : (
237
+ subtitleContent
238
+ );
239
+
240
+ const renderIcon = () => (
241
+ <span
242
+ className={cn(
243
+ styles.iconWrapper,
244
+ styles[size],
245
+ styles.tertiary,
246
+ styles[`icon-${contentColor}`],
247
+ {
248
+ [styles[`icon-${completeIconColor}`]]: completeIconColor,
249
+ },
250
+ )}
251
+ >
252
+ {IconComponent && <IconComponent className={styles.icon} />}
253
+ </span>
254
+ );
255
+
256
+ const renderContent = () =>
257
+ Icon || (IconComplete && isComplete) ? (
258
+ renderIcon()
259
+ ) : (
260
+ <React.Fragment>
261
+ {SIZES[size] > 24 && renderTitle()}
262
+ {SIZES[size] > 64 && renderSubTitle()}
263
+ </React.Fragment>
264
+ );
265
+
266
+ return (
267
+ <div
268
+ className={cn(styles.component, styles[size], className)}
269
+ style={{
270
+ ...(height && { height, width: height }),
271
+ }}
272
+ data-test-id={dataTestId}
273
+ >
274
+ <svg
275
+ viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}
276
+ className={styles.svg}
277
+ xmlns='http://www.w3.org/2000/svg'
278
+ >
279
+ <circle
280
+ className={cn(styles.backgroundCircle, styles[size], {
281
+ [styles.stroke]: !stroke,
282
+ })}
283
+ cx={memorized.center}
284
+ cy={memorized.center}
285
+ r={memorized.radius}
286
+ strokeWidth={STROKE[size]}
287
+ />
288
+ <circle
289
+ className={cn(styles.progressCircle, styles[view], styles[size], {
290
+ [styles[`bg-${view}`]]: fillComplete && isComplete,
291
+ })}
292
+ cx={memorized.center}
293
+ cy={memorized.center}
294
+ r={memorized.radius}
295
+ strokeWidth={STROKE[size]}
296
+ strokeDasharray={memorized.strokeDasharray}
297
+ strokeDashoffset={
298
+ direction === 'counter-clockwise'
299
+ ? -memorized.strokeDashoffset
300
+ : memorized.strokeDashoffset
301
+ }
302
+ transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}
303
+ />
304
+ </svg>
305
+ <div
306
+ className={cn(styles.labelWrapper, {
307
+ [styles.label]: Icon || IconComplete,
308
+ })}
309
+ >
310
+ {children || renderContent()}
311
+ </div>
312
+ </div>
313
+ );
314
+ };
package/src/index.module.css ADDED
@@ -0,0 +1,238 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+
3
+ :root {
4
+ /* stroke */
5
+ --circular-progress-bar-stroke-color: var(--color-light-border-primary);
6
+
7
+ /* positive */
8
+ --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
9
+
10
+ /* negative */
11
+ --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
12
+
13
+ /* theme */
14
+ --circular-progress-bar-font-family: var(--font-family-system);
15
+ --circular-progress-bar-font-weight: 600;
16
+ }
17
+
18
+ .component {
19
+ position: relative;
20
+ display: flex;
21
+ justify-content: center;
22
+ align-items: center;
23
+ }
24
+
25
+ .svg {
26
+ display: block;
27
+ width: 100%;
28
+ }
29
+
30
+ .title,
31
+ .subtitle {
32
+ overflow: hidden;
33
+ word-break: break-word;
34
+ white-space: nowrap;
35
+ text-overflow: ellipsis;
36
+ margin: 0 6px;
37
+ }
38
+
39
+ .subtitle {
40
+ max-height: 40px;
41
+ }
42
+
43
+ .labelWrapper {
44
+ text-align: center;
45
+ position: absolute;
46
+ top: 50%;
47
+ left: 50%;
48
+ width: 100%;
49
+ transform: translate(-50%, -50%);
50
+
51
+ &.label {
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ }
56
+ }
57
+
58
+ .typography {
59
+ font-feature-settings: 'ss01';
60
+ font-weight: var(--circular-progress-bar-font-weight);
61
+ font-family: var(--circular-progress-bar-font-family);
62
+ }
63
+
64
+ .xxl {
65
+ width: 144px;
66
+ height: 144px;
67
+
68
+ & .labelWrapper {
69
+ max-width: 128px;
70
+ }
71
+
72
+ & .title {
73
+ max-height: 32px;
74
+ }
75
+ }
76
+
77
+ .xl {
78
+ width: 128px;
79
+ height: 128px;
80
+
81
+ & .labelWrapper {
82
+ max-width: 108px;
83
+ }
84
+
85
+ & .title {
86
+ max-height: 32px;
87
+ }
88
+ }
89
+
90
+ .l {
91
+ width: 80px;
92
+ height: 80px;
93
+
94
+ & .labelWrapper {
95
+ max-width: 64px;
96
+ }
97
+
98
+ & .title {
99
+ max-height: 24px;
100
+ }
101
+ }
102
+
103
+ .m {
104
+ width: 64px;
105
+ height: 64px;
106
+
107
+ & .labelWrapper {
108
+ max-width: 48px;
109
+ }
110
+
111
+ & .title {
112
+ max-height: 16px;
113
+ margin: 0;
114
+ }
115
+ }
116
+
117
+ .s {
118
+ width: 48px;
119
+ height: 48px;
120
+
121
+ & .labelWrapper {
122
+ max-width: 40px;
123
+ }
124
+
125
+ & .title {
126
+ max-height: 16px;
127
+ margin: 0;
128
+ }
129
+ }
130
+
131
+ .xs {
132
+ width: 24px;
133
+ height: 24px;
134
+
135
+ & .labelWrapper {
136
+ max-width: 24px;
137
+ }
138
+ }
139
+
140
+ .backgroundCircle,
141
+ .progressCircle {
142
+ width: 100%;
143
+ height: 100%;
144
+ fill: transparent;
145
+ }
146
+
147
+ .positive {
148
+ stroke: var(--circular-progress-bar-positive-color);
149
+ }
150
+
151
+ .negative {
152
+ stroke: var(--circular-progress-bar-negative-color);
153
+ }
154
+
155
+ .backgroundCircle {
156
+ stroke: var(--circular-progress-bar-stroke-color);
157
+
158
+ &.stroke {
159
+ stroke: transparent;
160
+ }
161
+ }
162
+
163
+ .progressCircle {
164
+ 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
+
175
+ .iconWrapper {
176
+ display: flex;
177
+ align-items: center;
178
+ justify-content: center;
179
+
180
+ &.xxl {
181
+ max-width: 64px;
182
+ max-height: 64px;
183
+ }
184
+
185
+ &.xl {
186
+ max-width: 64px;
187
+ max-height: 64px;
188
+ }
189
+
190
+ &.l {
191
+ max-width: 48px;
192
+ max-height: 48px;
193
+ }
194
+
195
+ &.m {
196
+ max-width: 36px;
197
+ max-height: 36px;
198
+ }
199
+
200
+ &.s {
201
+ max-width: 24px;
202
+ max-height: 24px;
203
+ }
204
+
205
+ &.xs {
206
+ max-width: 16px;
207
+ max-height: 16px;
208
+ }
209
+
210
+ &.icon-tertiary {
211
+ color: var(--color-light-graphic-tertiary);
212
+ }
213
+
214
+ &.icon-positive {
215
+ color: var(--color-light-graphic-positive);
216
+ }
217
+
218
+ &.icon-negative {
219
+ color: var(--color-light-graphic-negative);
220
+ }
221
+
222
+ &.icon-primary-inverted {
223
+ color: var(--color-light-graphic-primary-inverted);
224
+ }
225
+
226
+ &.icon-primary {
227
+ color: var(--color-light-graphic-primary);
228
+ }
229
+
230
+ &.icon-secondary {
231
+ color: var(--color-light-graphic-secondary);
232
+ }
233
+ }
234
+
235
+ .icon {
236
+ width: 100%;
237
+ height: 100%;
238
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';