@alfalab/core-components-circular-progress-bar 2.4.2 → 2.4.3

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 (17) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/Component.d.ts +58 -3
  3. package/Component.js +102 -18
  4. package/cssm/Component.d.ts +58 -3
  5. package/cssm/Component.js +101 -17
  6. package/cssm/index.js +1 -1
  7. package/cssm/index.module.css +146 -41
  8. package/esm/Component.d.ts +58 -3
  9. package/esm/Component.js +102 -18
  10. package/esm/index.css +160 -55
  11. package/esm/index.js +1 -1
  12. package/index.css +160 -55
  13. package/index.js +1 -1
  14. package/modern/Component.d.ts +58 -3
  15. package/modern/Component.js +71 -18
  16. package/modern/index.css +160 -55
  17. package/package.json +3 -3
package/esm/index.css CHANGED
@@ -1,10 +1,25 @@
1
- /* hash: sgitj */
1
+ /* hash: ws88i */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
5
5
  --color-light-graphic-positive: #2fc26e;
6
+ --color-light-graphic-primary: #0b1f35;
7
+ --color-light-graphic-primary-inverted: #fff;
8
+ --color-light-graphic-secondary: #6d7986;
9
+ --color-light-graphic-tertiary: #b6bcc3;
6
10
  }
11
+ :root {
12
+
13
+ /* Hard */
14
+
15
+ /* Up */
7
16
 
17
+ /* Hard up */
18
+ }
19
+ :root {
20
+ --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
21
+ sans-serif;
22
+ }
8
23
  :root {
9
24
  /* bg */
10
25
  --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
@@ -14,94 +29,184 @@
14
29
 
15
30
  /* negative */
16
31
  --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
17
- }
18
32
 
19
- .circular-progress-bar__component_mot4l {
33
+ /* theme */
34
+ --circular-progress-bar-font-family: var(--font-family-system);
35
+ --circular-progress-bar-font-weight: 600;
36
+ }
37
+ .circular-progress-bar__component_1piud {
20
38
  position: relative;
21
39
  display: flex;
22
40
  justify-content: center;
23
41
  align-items: center;
24
42
  }
25
-
26
- .circular-progress-bar__svg_mot4l {
43
+ .circular-progress-bar__svg_1piud {
27
44
  display: block;
28
45
  width: 100%;
29
46
  }
30
-
31
- .circular-progress-bar__title_mot4l,
32
- .circular-progress-bar__subtitle_mot4l {
47
+ .circular-progress-bar__title_1piud,
48
+ .circular-progress-bar__subtitle_1piud {
33
49
  overflow: hidden;
34
50
  word-break: break-word;
51
+ white-space: nowrap;
52
+ text-overflow: ellipsis;
53
+ margin: 0 6px;
35
54
  }
36
-
37
- .circular-progress-bar__subtitle_mot4l {
55
+ .circular-progress-bar__subtitle_1piud {
38
56
  max-height: 40px;
39
57
  }
40
-
41
- .circular-progress-bar__l_mot4l {
58
+ .circular-progress-bar__labelWrapper_1piud {
59
+ text-align: center;
60
+ position: absolute;
61
+ top: 50%;
62
+ left: 50%;
63
+ width: 100%;
64
+ transform: translate(-50%, -50%)
65
+ }
66
+ .circular-progress-bar__labelWrapper_1piud.circular-progress-bar__label_1piud {
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ }
71
+ .circular-progress-bar__typography_1piud {
72
+ font-feature-settings: 'ss01';
73
+ font-weight: var(--circular-progress-bar-font-weight);
74
+ font-family: var(--circular-progress-bar-font-family);
75
+ }
76
+ .circular-progress-bar__xxl_1piud {
42
77
  width: 144px;
43
78
  height: 144px
44
79
  }
45
-
46
- .circular-progress-bar__l_mot4l .circular-progress-bar__label_mot4l {
47
- max-width: 120px;
80
+ .circular-progress-bar__xxl_1piud .circular-progress-bar__labelWrapper_1piud {
81
+ max-width: 128px;
48
82
  }
49
-
50
- .circular-progress-bar__l_mot4l .circular-progress-bar__title_mot4l {
83
+ .circular-progress-bar__xxl_1piud .circular-progress-bar__title_1piud {
51
84
  max-height: 32px;
52
85
  }
53
-
54
- .circular-progress-bar__m_mot4l {
55
- width: 120px;
56
- height: 120px
86
+ .circular-progress-bar__xl_1piud {
87
+ width: 128px;
88
+ height: 128px
57
89
  }
58
-
59
- .circular-progress-bar__m_mot4l .circular-progress-bar__label_mot4l {
60
- max-width: 96px;
90
+ .circular-progress-bar__xl_1piud .circular-progress-bar__labelWrapper_1piud {
91
+ max-width: 108px;
61
92
  }
62
-
63
- .circular-progress-bar__m_mot4l .circular-progress-bar__title_mot4l {
64
- max-height: 24px;
93
+ .circular-progress-bar__xl_1piud .circular-progress-bar__title_1piud {
94
+ max-height: 32px;
65
95
  }
66
-
67
- .circular-progress-bar__s_mot4l {
68
- width: 96px;
69
- height: 96px
96
+ .circular-progress-bar__l_1piud {
97
+ width: 80px;
98
+ height: 80px
70
99
  }
71
-
72
- .circular-progress-bar__s_mot4l .circular-progress-bar__label_mot4l {
73
- max-width: 72px;
100
+ .circular-progress-bar__l_1piud .circular-progress-bar__labelWrapper_1piud {
101
+ max-width: 64px;
74
102
  }
75
-
76
- .circular-progress-bar__s_mot4l .circular-progress-bar__title_mot4l {
103
+ .circular-progress-bar__l_1piud .circular-progress-bar__title_1piud {
77
104
  max-height: 24px;
78
105
  }
79
-
80
- .circular-progress-bar__label_mot4l {
81
- text-align: center;
82
- position: absolute;
83
- top: 50%;
84
- left: 50%;
85
- width: 100%;
86
- transform: translate(-50%, -50%);
106
+ .circular-progress-bar__m_1piud {
107
+ width: 64px;
108
+ height: 64px
87
109
  }
88
-
89
- .circular-progress-bar__backgroundCircle_mot4l,
90
- .circular-progress-bar__progressCircle_mot4l {
110
+ .circular-progress-bar__m_1piud .circular-progress-bar__labelWrapper_1piud {
111
+ max-width: 48px;
112
+ }
113
+ .circular-progress-bar__m_1piud .circular-progress-bar__title_1piud {
114
+ max-height: 16px;
115
+ margin: 0;
116
+ }
117
+ .circular-progress-bar__s_1piud {
118
+ width: 48px;
119
+ height: 48px
120
+ }
121
+ .circular-progress-bar__s_1piud .circular-progress-bar__labelWrapper_1piud {
122
+ max-width: 40px;
123
+ }
124
+ .circular-progress-bar__s_1piud .circular-progress-bar__title_1piud {
125
+ max-height: 16px;
126
+ margin: 0;
127
+ }
128
+ .circular-progress-bar__xs_1piud {
129
+ width: 24px;
130
+ height: 24px
131
+ }
132
+ .circular-progress-bar__xs_1piud .circular-progress-bar__labelWrapper_1piud {
133
+ max-width: 24px;
134
+ }
135
+ .circular-progress-bar__backgroundCircle_1piud,
136
+ .circular-progress-bar__progressCircle_1piud {
91
137
  width: 100%;
92
138
  height: 100%;
93
139
  fill: transparent;
94
- stroke-width: 8;
95
140
  }
96
-
97
- .circular-progress-bar__positive_mot4l {
141
+ .circular-progress-bar__positive_1piud {
98
142
  stroke: var(--circular-progress-bar-positive-color);
99
143
  }
100
-
101
- .circular-progress-bar__negative_mot4l {
144
+ .circular-progress-bar__negative_1piud {
102
145
  stroke: var(--circular-progress-bar-negative-color);
103
146
  }
104
-
105
- .circular-progress-bar__backgroundCircle_mot4l {
106
- stroke: var(--circular-progress-bar-bg-color);
147
+ .circular-progress-bar__backgroundCircle_1piud {
148
+ stroke: var(--circular-progress-bar-bg-color)
149
+ }
150
+ .circular-progress-bar__backgroundCircle_1piud.circular-progress-bar__stroke_1piud {
151
+ stroke: transparent;
152
+ }
153
+ .circular-progress-bar__progressCircle_1piud {
154
+ stroke-linecap: round
155
+ }
156
+ .circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-positive_1piud {
157
+ fill: var(--circular-progress-bar-positive-color);
158
+ }
159
+ .circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-negative_1piud {
160
+ fill: var(--circular-progress-bar-negative-color);
161
+ }
162
+ .circular-progress-bar__iconWrapper_1piud {
163
+ display: flex;
164
+ align-items: center;
165
+ justify-content: center
166
+ }
167
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xxl_1piud {
168
+ max-width: 64px;
169
+ max-height: 64px;
170
+ }
171
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xl_1piud {
172
+ max-width: 64px;
173
+ max-height: 64px;
174
+ }
175
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__l_1piud {
176
+ max-width: 48px;
177
+ max-height: 48px;
178
+ }
179
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__m_1piud {
180
+ max-width: 36px;
181
+ max-height: 36px;
182
+ }
183
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__s_1piud {
184
+ max-width: 24px;
185
+ max-height: 24px;
186
+ }
187
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xs_1piud {
188
+ max-width: 16px;
189
+ max-height: 16px;
190
+ }
191
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-tertiary_1piud {
192
+ color: var(--color-light-graphic-tertiary);
193
+ }
194
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-positive_1piud {
195
+ color: var(--color-light-graphic-positive);
196
+ }
197
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-negative_1piud {
198
+ color: var(--color-light-graphic-negative);
199
+ }
200
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary-inverted_1piud {
201
+ color: var(--color-light-graphic-primary-inverted);
202
+ }
203
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary_1piud {
204
+ color: var(--color-light-graphic-primary);
205
+ }
206
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-secondary_1piud {
207
+ color: var(--color-light-graphic-secondary);
208
+ }
209
+ .circular-progress-bar__icon_1piud {
210
+ width: 100%;
211
+ height: 100%;
107
212
  }
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
+ export { CircularProgressBar } from './Component.js';
1
2
  import 'classnames';
2
3
  import 'react';
3
4
  import '@alfalab/core-components-typography/esm';
4
- export { CircularProgressBar } from './Component.js';
package/index.css CHANGED
@@ -1,10 +1,25 @@
1
- /* hash: sgitj */
1
+ /* hash: ws88i */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
5
5
  --color-light-graphic-positive: #2fc26e;
6
+ --color-light-graphic-primary: #0b1f35;
7
+ --color-light-graphic-primary-inverted: #fff;
8
+ --color-light-graphic-secondary: #6d7986;
9
+ --color-light-graphic-tertiary: #b6bcc3;
6
10
  }
11
+ :root {
12
+
13
+ /* Hard */
14
+
15
+ /* Up */
7
16
 
17
+ /* Hard up */
18
+ }
19
+ :root {
20
+ --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
21
+ sans-serif;
22
+ }
8
23
  :root {
9
24
  /* bg */
10
25
  --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
@@ -14,94 +29,184 @@
14
29
 
15
30
  /* negative */
16
31
  --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
17
- }
18
32
 
19
- .circular-progress-bar__component_mot4l {
33
+ /* theme */
34
+ --circular-progress-bar-font-family: var(--font-family-system);
35
+ --circular-progress-bar-font-weight: 600;
36
+ }
37
+ .circular-progress-bar__component_1piud {
20
38
  position: relative;
21
39
  display: flex;
22
40
  justify-content: center;
23
41
  align-items: center;
24
42
  }
25
-
26
- .circular-progress-bar__svg_mot4l {
43
+ .circular-progress-bar__svg_1piud {
27
44
  display: block;
28
45
  width: 100%;
29
46
  }
30
-
31
- .circular-progress-bar__title_mot4l,
32
- .circular-progress-bar__subtitle_mot4l {
47
+ .circular-progress-bar__title_1piud,
48
+ .circular-progress-bar__subtitle_1piud {
33
49
  overflow: hidden;
34
50
  word-break: break-word;
51
+ white-space: nowrap;
52
+ text-overflow: ellipsis;
53
+ margin: 0 6px;
35
54
  }
36
-
37
- .circular-progress-bar__subtitle_mot4l {
55
+ .circular-progress-bar__subtitle_1piud {
38
56
  max-height: 40px;
39
57
  }
40
-
41
- .circular-progress-bar__l_mot4l {
58
+ .circular-progress-bar__labelWrapper_1piud {
59
+ text-align: center;
60
+ position: absolute;
61
+ top: 50%;
62
+ left: 50%;
63
+ width: 100%;
64
+ transform: translate(-50%, -50%)
65
+ }
66
+ .circular-progress-bar__labelWrapper_1piud.circular-progress-bar__label_1piud {
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ }
71
+ .circular-progress-bar__typography_1piud {
72
+ font-feature-settings: 'ss01';
73
+ font-weight: var(--circular-progress-bar-font-weight);
74
+ font-family: var(--circular-progress-bar-font-family);
75
+ }
76
+ .circular-progress-bar__xxl_1piud {
42
77
  width: 144px;
43
78
  height: 144px
44
79
  }
45
-
46
- .circular-progress-bar__l_mot4l .circular-progress-bar__label_mot4l {
47
- max-width: 120px;
80
+ .circular-progress-bar__xxl_1piud .circular-progress-bar__labelWrapper_1piud {
81
+ max-width: 128px;
48
82
  }
49
-
50
- .circular-progress-bar__l_mot4l .circular-progress-bar__title_mot4l {
83
+ .circular-progress-bar__xxl_1piud .circular-progress-bar__title_1piud {
51
84
  max-height: 32px;
52
85
  }
53
-
54
- .circular-progress-bar__m_mot4l {
55
- width: 120px;
56
- height: 120px
86
+ .circular-progress-bar__xl_1piud {
87
+ width: 128px;
88
+ height: 128px
57
89
  }
58
-
59
- .circular-progress-bar__m_mot4l .circular-progress-bar__label_mot4l {
60
- max-width: 96px;
90
+ .circular-progress-bar__xl_1piud .circular-progress-bar__labelWrapper_1piud {
91
+ max-width: 108px;
61
92
  }
62
-
63
- .circular-progress-bar__m_mot4l .circular-progress-bar__title_mot4l {
64
- max-height: 24px;
93
+ .circular-progress-bar__xl_1piud .circular-progress-bar__title_1piud {
94
+ max-height: 32px;
65
95
  }
66
-
67
- .circular-progress-bar__s_mot4l {
68
- width: 96px;
69
- height: 96px
96
+ .circular-progress-bar__l_1piud {
97
+ width: 80px;
98
+ height: 80px
70
99
  }
71
-
72
- .circular-progress-bar__s_mot4l .circular-progress-bar__label_mot4l {
73
- max-width: 72px;
100
+ .circular-progress-bar__l_1piud .circular-progress-bar__labelWrapper_1piud {
101
+ max-width: 64px;
74
102
  }
75
-
76
- .circular-progress-bar__s_mot4l .circular-progress-bar__title_mot4l {
103
+ .circular-progress-bar__l_1piud .circular-progress-bar__title_1piud {
77
104
  max-height: 24px;
78
105
  }
79
-
80
- .circular-progress-bar__label_mot4l {
81
- text-align: center;
82
- position: absolute;
83
- top: 50%;
84
- left: 50%;
85
- width: 100%;
86
- transform: translate(-50%, -50%);
106
+ .circular-progress-bar__m_1piud {
107
+ width: 64px;
108
+ height: 64px
87
109
  }
88
-
89
- .circular-progress-bar__backgroundCircle_mot4l,
90
- .circular-progress-bar__progressCircle_mot4l {
110
+ .circular-progress-bar__m_1piud .circular-progress-bar__labelWrapper_1piud {
111
+ max-width: 48px;
112
+ }
113
+ .circular-progress-bar__m_1piud .circular-progress-bar__title_1piud {
114
+ max-height: 16px;
115
+ margin: 0;
116
+ }
117
+ .circular-progress-bar__s_1piud {
118
+ width: 48px;
119
+ height: 48px
120
+ }
121
+ .circular-progress-bar__s_1piud .circular-progress-bar__labelWrapper_1piud {
122
+ max-width: 40px;
123
+ }
124
+ .circular-progress-bar__s_1piud .circular-progress-bar__title_1piud {
125
+ max-height: 16px;
126
+ margin: 0;
127
+ }
128
+ .circular-progress-bar__xs_1piud {
129
+ width: 24px;
130
+ height: 24px
131
+ }
132
+ .circular-progress-bar__xs_1piud .circular-progress-bar__labelWrapper_1piud {
133
+ max-width: 24px;
134
+ }
135
+ .circular-progress-bar__backgroundCircle_1piud,
136
+ .circular-progress-bar__progressCircle_1piud {
91
137
  width: 100%;
92
138
  height: 100%;
93
139
  fill: transparent;
94
- stroke-width: 8;
95
140
  }
96
-
97
- .circular-progress-bar__positive_mot4l {
141
+ .circular-progress-bar__positive_1piud {
98
142
  stroke: var(--circular-progress-bar-positive-color);
99
143
  }
100
-
101
- .circular-progress-bar__negative_mot4l {
144
+ .circular-progress-bar__negative_1piud {
102
145
  stroke: var(--circular-progress-bar-negative-color);
103
146
  }
104
-
105
- .circular-progress-bar__backgroundCircle_mot4l {
106
- stroke: var(--circular-progress-bar-bg-color);
147
+ .circular-progress-bar__backgroundCircle_1piud {
148
+ stroke: var(--circular-progress-bar-bg-color)
149
+ }
150
+ .circular-progress-bar__backgroundCircle_1piud.circular-progress-bar__stroke_1piud {
151
+ stroke: transparent;
152
+ }
153
+ .circular-progress-bar__progressCircle_1piud {
154
+ stroke-linecap: round
155
+ }
156
+ .circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-positive_1piud {
157
+ fill: var(--circular-progress-bar-positive-color);
158
+ }
159
+ .circular-progress-bar__progressCircle_1piud.circular-progress-bar__bg-negative_1piud {
160
+ fill: var(--circular-progress-bar-negative-color);
161
+ }
162
+ .circular-progress-bar__iconWrapper_1piud {
163
+ display: flex;
164
+ align-items: center;
165
+ justify-content: center
166
+ }
167
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xxl_1piud {
168
+ max-width: 64px;
169
+ max-height: 64px;
170
+ }
171
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xl_1piud {
172
+ max-width: 64px;
173
+ max-height: 64px;
174
+ }
175
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__l_1piud {
176
+ max-width: 48px;
177
+ max-height: 48px;
178
+ }
179
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__m_1piud {
180
+ max-width: 36px;
181
+ max-height: 36px;
182
+ }
183
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__s_1piud {
184
+ max-width: 24px;
185
+ max-height: 24px;
186
+ }
187
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__xs_1piud {
188
+ max-width: 16px;
189
+ max-height: 16px;
190
+ }
191
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-tertiary_1piud {
192
+ color: var(--color-light-graphic-tertiary);
193
+ }
194
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-positive_1piud {
195
+ color: var(--color-light-graphic-positive);
196
+ }
197
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-negative_1piud {
198
+ color: var(--color-light-graphic-negative);
199
+ }
200
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary-inverted_1piud {
201
+ color: var(--color-light-graphic-primary-inverted);
202
+ }
203
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-primary_1piud {
204
+ color: var(--color-light-graphic-primary);
205
+ }
206
+ .circular-progress-bar__iconWrapper_1piud.circular-progress-bar__icon-secondary_1piud {
207
+ color: var(--color-light-graphic-secondary);
208
+ }
209
+ .circular-progress-bar__icon_1piud {
210
+ width: 100%;
211
+ height: 100%;
107
212
  }
package/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var Component = require('./Component.js');
5
6
  require('classnames');
6
7
  require('react');
7
8
  require('@alfalab/core-components-typography');
8
- var Component = require('./Component.js');
9
9
 
10
10
 
11
11
 
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode } from "react";
3
+ import { ReactNode, ElementType } from "react";
4
4
  type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
@@ -14,18 +14,73 @@ type CircularProgressBarProps = {
14
14
  * Основной текст
15
15
  */
16
16
  title?: ReactNode;
17
+ /**
18
+ * Цвет контента
19
+ */
20
+ contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
17
21
  /**
18
22
  * Дополнительный текст
19
23
  */
20
24
  subtitle?: ReactNode;
25
+ /**
26
+ * Основной текст при 100%
27
+ */
28
+ titleComplete?: ReactNode;
29
+ /**
30
+ * Дополнительный текст при 100%
31
+ */
32
+ subtitleComplete?: ReactNode;
21
33
  /**
22
34
  * Цвет заполнения
23
35
  */
24
36
  view?: 'positive' | 'negative';
25
37
  /**
26
- * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
38
+ * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
39
+ */
40
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
41
+ /**
42
+ * Наличие желоба
43
+ */
44
+ stroke?: boolean;
45
+ /**
46
+ * Заливка при 100%
47
+ */
48
+ fillComplete?: boolean;
49
+ /**
50
+ * Цвет текста при 100%
51
+ */
52
+ completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
53
+ /**
54
+ * Цвет иконки при 100%
55
+ */
56
+ completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
57
+ /**
58
+ * Компонент иконки
59
+ */
60
+ icon?: ElementType<{
61
+ className?: string;
62
+ }>;
63
+ /**
64
+ * Компонент иконки при 100%
65
+ */
66
+ iconComplete?: ElementType<{
67
+ className?: string;
68
+ }>;
69
+ /**
70
+ * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
71
+ */
72
+ direction?: 'clockwise' | 'counter-clockwise';
73
+ /**
74
+ * Высота компонента, min = 24; max = 144
75
+ * использовать совместно с size :
76
+ * xxl от 144
77
+ * xl от 128 до 143
78
+ * l от 80 до 127
79
+ * m от 64 до 79
80
+ * s от 48 до 63
81
+ * xs от 24 до 47
27
82
  */
28
- size?: 'l' | 'm' | 's';
83
+ height?: number;
29
84
  /**
30
85
  * Id компонента для тестов
31
86
  */