@alfalab/core-components-circular-progress-bar 3.0.1 → 3.0.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 (16) hide show
  1. package/Component.d.ts +1 -1
  2. package/Component.js +5 -5
  3. package/cssm/Component.d.ts +1 -1
  4. package/cssm/Component.js +4 -4
  5. package/cssm/index.js +1 -1
  6. package/esm/Component.d.ts +1 -1
  7. package/esm/Component.js +4 -4
  8. package/esm/index.css +49 -49
  9. package/esm/index.js +1 -1
  10. package/index.css +49 -49
  11. package/index.js +1 -1
  12. package/modern/Component.d.ts +1 -1
  13. package/modern/Component.js +6 -10
  14. package/modern/index.css +49 -49
  15. package/modern/index.js +1 -1
  16. package/package.json +2 -2
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ElementType } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
package/Component.js CHANGED
@@ -2,16 +2,16 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var cn = require('classnames');
6
5
  var React = require('react');
6
+ var cn = require('classnames');
7
7
  var coreComponentsTypography = require('@alfalab/core-components-typography');
8
8
 
9
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
10
 
11
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
12
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
+ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
13
13
 
14
- /*! *****************************************************************************
14
+ /******************************************************************************
15
15
  Copyright (c) Microsoft Corporation.
16
16
 
17
17
  Permission to use, copy, modify, and/or distribute this software for any
@@ -38,7 +38,7 @@ var __assign = function () {
38
38
  return __assign.apply(this, arguments);
39
39
  };
40
40
 
41
- var styles = {"component":"circular-progress-bar__component_1sqfo","svg":"circular-progress-bar__svg_1sqfo","title":"circular-progress-bar__title_1sqfo","subtitle":"circular-progress-bar__subtitle_1sqfo","labelWrapper":"circular-progress-bar__labelWrapper_1sqfo","label":"circular-progress-bar__label_1sqfo","typography":"circular-progress-bar__typography_1sqfo","xxl":"circular-progress-bar__xxl_1sqfo","xl":"circular-progress-bar__xl_1sqfo","l":"circular-progress-bar__l_1sqfo","m":"circular-progress-bar__m_1sqfo","s":"circular-progress-bar__s_1sqfo","xs":"circular-progress-bar__xs_1sqfo","backgroundCircle":"circular-progress-bar__backgroundCircle_1sqfo","progressCircle":"circular-progress-bar__progressCircle_1sqfo","positive":"circular-progress-bar__positive_1sqfo","negative":"circular-progress-bar__negative_1sqfo","stroke":"circular-progress-bar__stroke_1sqfo","bg-positive":"circular-progress-bar__bg-positive_1sqfo","bg-negative":"circular-progress-bar__bg-negative_1sqfo","iconWrapper":"circular-progress-bar__iconWrapper_1sqfo","icon-tertiary":"circular-progress-bar__icon-tertiary_1sqfo","icon-positive":"circular-progress-bar__icon-positive_1sqfo","icon-negative":"circular-progress-bar__icon-negative_1sqfo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1sqfo","icon-primary":"circular-progress-bar__icon-primary_1sqfo","icon-secondary":"circular-progress-bar__icon-secondary_1sqfo","icon":"circular-progress-bar__icon_1sqfo"};
41
+ var styles = {"component":"circular-progress-bar__component_gs6rg","svg":"circular-progress-bar__svg_gs6rg","title":"circular-progress-bar__title_gs6rg","subtitle":"circular-progress-bar__subtitle_gs6rg","labelWrapper":"circular-progress-bar__labelWrapper_gs6rg","label":"circular-progress-bar__label_gs6rg","typography":"circular-progress-bar__typography_gs6rg","xxl":"circular-progress-bar__xxl_gs6rg","xl":"circular-progress-bar__xl_gs6rg","l":"circular-progress-bar__l_gs6rg","m":"circular-progress-bar__m_gs6rg","s":"circular-progress-bar__s_gs6rg","xs":"circular-progress-bar__xs_gs6rg","backgroundCircle":"circular-progress-bar__backgroundCircle_gs6rg","progressCircle":"circular-progress-bar__progressCircle_gs6rg","positive":"circular-progress-bar__positive_gs6rg","negative":"circular-progress-bar__negative_gs6rg","stroke":"circular-progress-bar__stroke_gs6rg","bg-positive":"circular-progress-bar__bg-positive_gs6rg","bg-negative":"circular-progress-bar__bg-negative_gs6rg","iconWrapper":"circular-progress-bar__iconWrapper_gs6rg","icon-tertiary":"circular-progress-bar__icon-tertiary_gs6rg","icon-positive":"circular-progress-bar__icon-positive_gs6rg","icon-negative":"circular-progress-bar__icon-negative_gs6rg","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_gs6rg","icon-primary":"circular-progress-bar__icon-primary_gs6rg","icon-secondary":"circular-progress-bar__icon-secondary_gs6rg","icon":"circular-progress-bar__icon_gs6rg"};
42
42
  require('./index.css')
43
43
 
44
44
  var SIZES = {
@@ -106,7 +106,7 @@ var CircularProgressBar = function (_a) {
106
106
  var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
107
107
  var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
108
108
  var renderTitleString = function () {
109
- return (React__default['default'].createElement(React__default['default'].Fragment, null, SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
109
+ return SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent));
110
110
  };
111
111
  var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
112
112
  var renderSubTitle = function () {
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ElementType } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
package/cssm/Component.js CHANGED
@@ -2,18 +2,18 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var cn = require('classnames');
6
5
  var React = require('react');
6
+ var cn = require('classnames');
7
7
  var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
8
8
  var styles = require('./index.module.css');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
11
 
12
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
13
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
+ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
14
14
  var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
15
15
 
16
- /*! *****************************************************************************
16
+ /******************************************************************************
17
17
  Copyright (c) Microsoft Corporation.
18
18
 
19
19
  Permission to use, copy, modify, and/or distribute this software for any
@@ -105,7 +105,7 @@ var CircularProgressBar = function (_a) {
105
105
  var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
106
106
  var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
107
107
  var renderTitleString = function () {
108
- return (React__default['default'].createElement(React__default['default'].Fragment, null, SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles__default['default'].typography, styles__default['default'].title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles__default['default'].title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
108
+ return SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles__default['default'].typography, styles__default['default'].title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles__default['default'].title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent));
109
109
  };
110
110
  var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
111
111
  var renderSubTitle = function () {
package/cssm/index.js CHANGED
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('classnames');
7
6
  require('react');
7
+ require('classnames');
8
8
  require('@alfalab/core-components-typography/cssm');
9
9
  require('./index.module.css');
10
10
 
package/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ElementType } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
package/esm/Component.js CHANGED
@@ -1,8 +1,8 @@
1
- import cn from 'classnames';
2
1
  import React, { useMemo } from 'react';
2
+ import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/esm';
4
4
 
5
- /*! *****************************************************************************
5
+ /******************************************************************************
6
6
  Copyright (c) Microsoft Corporation.
7
7
 
8
8
  Permission to use, copy, modify, and/or distribute this software for any
@@ -29,7 +29,7 @@ var __assign = function () {
29
29
  return __assign.apply(this, arguments);
30
30
  };
31
31
 
32
- var styles = {"component":"circular-progress-bar__component_1sqfo","svg":"circular-progress-bar__svg_1sqfo","title":"circular-progress-bar__title_1sqfo","subtitle":"circular-progress-bar__subtitle_1sqfo","labelWrapper":"circular-progress-bar__labelWrapper_1sqfo","label":"circular-progress-bar__label_1sqfo","typography":"circular-progress-bar__typography_1sqfo","xxl":"circular-progress-bar__xxl_1sqfo","xl":"circular-progress-bar__xl_1sqfo","l":"circular-progress-bar__l_1sqfo","m":"circular-progress-bar__m_1sqfo","s":"circular-progress-bar__s_1sqfo","xs":"circular-progress-bar__xs_1sqfo","backgroundCircle":"circular-progress-bar__backgroundCircle_1sqfo","progressCircle":"circular-progress-bar__progressCircle_1sqfo","positive":"circular-progress-bar__positive_1sqfo","negative":"circular-progress-bar__negative_1sqfo","stroke":"circular-progress-bar__stroke_1sqfo","bg-positive":"circular-progress-bar__bg-positive_1sqfo","bg-negative":"circular-progress-bar__bg-negative_1sqfo","iconWrapper":"circular-progress-bar__iconWrapper_1sqfo","icon-tertiary":"circular-progress-bar__icon-tertiary_1sqfo","icon-positive":"circular-progress-bar__icon-positive_1sqfo","icon-negative":"circular-progress-bar__icon-negative_1sqfo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1sqfo","icon-primary":"circular-progress-bar__icon-primary_1sqfo","icon-secondary":"circular-progress-bar__icon-secondary_1sqfo","icon":"circular-progress-bar__icon_1sqfo"};
32
+ var styles = {"component":"circular-progress-bar__component_gs6rg","svg":"circular-progress-bar__svg_gs6rg","title":"circular-progress-bar__title_gs6rg","subtitle":"circular-progress-bar__subtitle_gs6rg","labelWrapper":"circular-progress-bar__labelWrapper_gs6rg","label":"circular-progress-bar__label_gs6rg","typography":"circular-progress-bar__typography_gs6rg","xxl":"circular-progress-bar__xxl_gs6rg","xl":"circular-progress-bar__xl_gs6rg","l":"circular-progress-bar__l_gs6rg","m":"circular-progress-bar__m_gs6rg","s":"circular-progress-bar__s_gs6rg","xs":"circular-progress-bar__xs_gs6rg","backgroundCircle":"circular-progress-bar__backgroundCircle_gs6rg","progressCircle":"circular-progress-bar__progressCircle_gs6rg","positive":"circular-progress-bar__positive_gs6rg","negative":"circular-progress-bar__negative_gs6rg","stroke":"circular-progress-bar__stroke_gs6rg","bg-positive":"circular-progress-bar__bg-positive_gs6rg","bg-negative":"circular-progress-bar__bg-negative_gs6rg","iconWrapper":"circular-progress-bar__iconWrapper_gs6rg","icon-tertiary":"circular-progress-bar__icon-tertiary_gs6rg","icon-positive":"circular-progress-bar__icon-positive_gs6rg","icon-negative":"circular-progress-bar__icon-negative_gs6rg","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_gs6rg","icon-primary":"circular-progress-bar__icon-primary_gs6rg","icon-secondary":"circular-progress-bar__icon-secondary_gs6rg","icon":"circular-progress-bar__icon_gs6rg"};
33
33
  require('./index.css')
34
34
 
35
35
  var SIZES = {
@@ -97,7 +97,7 @@ var CircularProgressBar = function (_a) {
97
97
  var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
98
98
  var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
99
99
  var renderTitleString = function () {
100
- return (React.createElement(React.Fragment, null, 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))));
100
+ return SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent));
101
101
  };
102
102
  var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
103
103
  var renderSubTitle = function () {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 6yca2 */
1
+ /* hash: 1ynh1 */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
@@ -34,28 +34,28 @@
34
34
  --circular-progress-bar-font-family: var(--font-family-system);
35
35
  --circular-progress-bar-font-weight: 600;
36
36
  }
37
- .circular-progress-bar__component_1sqfo {
37
+ .circular-progress-bar__component_gs6rg {
38
38
  position: relative;
39
39
  display: flex;
40
40
  justify-content: center;
41
41
  align-items: center;
42
42
  }
43
- .circular-progress-bar__svg_1sqfo {
43
+ .circular-progress-bar__svg_gs6rg {
44
44
  display: block;
45
45
  width: 100%;
46
46
  }
47
- .circular-progress-bar__title_1sqfo,
48
- .circular-progress-bar__subtitle_1sqfo {
47
+ .circular-progress-bar__title_gs6rg,
48
+ .circular-progress-bar__subtitle_gs6rg {
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
54
  }
55
- .circular-progress-bar__subtitle_1sqfo {
55
+ .circular-progress-bar__subtitle_gs6rg {
56
56
  max-height: 40px;
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sqfo {
58
+ .circular-progress-bar__labelWrapper_gs6rg {
59
59
  text-align: center;
60
60
  position: absolute;
61
61
  top: 50%;
@@ -63,150 +63,150 @@
63
63
  width: 100%;
64
64
  transform: translate(-50%, -50%)
65
65
  }
66
- .circular-progress-bar__labelWrapper_1sqfo.circular-progress-bar__label_1sqfo {
66
+ .circular-progress-bar__labelWrapper_gs6rg.circular-progress-bar__label_gs6rg {
67
67
  display: flex;
68
68
  align-items: center;
69
69
  justify-content: center;
70
70
  }
71
- .circular-progress-bar__typography_1sqfo {
71
+ .circular-progress-bar__typography_gs6rg {
72
72
  font-feature-settings: 'ss01';
73
73
  font-weight: var(--circular-progress-bar-font-weight);
74
74
  font-family: var(--circular-progress-bar-font-family);
75
75
  }
76
- .circular-progress-bar__xxl_1sqfo {
76
+ .circular-progress-bar__xxl_gs6rg {
77
77
  width: 144px;
78
78
  height: 144px
79
79
  }
80
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
80
+ .circular-progress-bar__xxl_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
81
81
  max-width: 128px;
82
82
  }
83
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__title_1sqfo {
83
+ .circular-progress-bar__xxl_gs6rg .circular-progress-bar__title_gs6rg {
84
84
  max-height: 32px;
85
85
  }
86
- .circular-progress-bar__xl_1sqfo {
86
+ .circular-progress-bar__xl_gs6rg {
87
87
  width: 128px;
88
88
  height: 128px
89
89
  }
90
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
90
+ .circular-progress-bar__xl_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
91
91
  max-width: 108px;
92
92
  }
93
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__title_1sqfo {
93
+ .circular-progress-bar__xl_gs6rg .circular-progress-bar__title_gs6rg {
94
94
  max-height: 32px;
95
95
  }
96
- .circular-progress-bar__l_1sqfo {
96
+ .circular-progress-bar__l_gs6rg {
97
97
  width: 80px;
98
98
  height: 80px
99
99
  }
100
- .circular-progress-bar__l_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
100
+ .circular-progress-bar__l_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
101
101
  max-width: 64px;
102
102
  }
103
- .circular-progress-bar__l_1sqfo .circular-progress-bar__title_1sqfo {
103
+ .circular-progress-bar__l_gs6rg .circular-progress-bar__title_gs6rg {
104
104
  max-height: 24px;
105
105
  }
106
- .circular-progress-bar__m_1sqfo {
106
+ .circular-progress-bar__m_gs6rg {
107
107
  width: 64px;
108
108
  height: 64px
109
109
  }
110
- .circular-progress-bar__m_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
110
+ .circular-progress-bar__m_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
111
111
  max-width: 48px;
112
112
  }
113
- .circular-progress-bar__m_1sqfo .circular-progress-bar__title_1sqfo {
113
+ .circular-progress-bar__m_gs6rg .circular-progress-bar__title_gs6rg {
114
114
  max-height: 16px;
115
115
  margin: 0;
116
116
  }
117
- .circular-progress-bar__s_1sqfo {
117
+ .circular-progress-bar__s_gs6rg {
118
118
  width: 48px;
119
119
  height: 48px
120
120
  }
121
- .circular-progress-bar__s_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
121
+ .circular-progress-bar__s_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
122
122
  max-width: 40px;
123
123
  }
124
- .circular-progress-bar__s_1sqfo .circular-progress-bar__title_1sqfo {
124
+ .circular-progress-bar__s_gs6rg .circular-progress-bar__title_gs6rg {
125
125
  max-height: 16px;
126
126
  margin: 0;
127
127
  }
128
- .circular-progress-bar__xs_1sqfo {
128
+ .circular-progress-bar__xs_gs6rg {
129
129
  width: 24px;
130
130
  height: 24px
131
131
  }
132
- .circular-progress-bar__xs_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
132
+ .circular-progress-bar__xs_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
133
133
  max-width: 24px;
134
134
  }
135
- .circular-progress-bar__backgroundCircle_1sqfo,
136
- .circular-progress-bar__progressCircle_1sqfo {
135
+ .circular-progress-bar__backgroundCircle_gs6rg,
136
+ .circular-progress-bar__progressCircle_gs6rg {
137
137
  width: 100%;
138
138
  height: 100%;
139
139
  fill: transparent;
140
140
  }
141
- .circular-progress-bar__positive_1sqfo {
141
+ .circular-progress-bar__positive_gs6rg {
142
142
  stroke: var(--circular-progress-bar-positive-color);
143
143
  }
144
- .circular-progress-bar__negative_1sqfo {
144
+ .circular-progress-bar__negative_gs6rg {
145
145
  stroke: var(--circular-progress-bar-negative-color);
146
146
  }
147
- .circular-progress-bar__backgroundCircle_1sqfo {
147
+ .circular-progress-bar__backgroundCircle_gs6rg {
148
148
  stroke: var(--circular-progress-bar-bg-color)
149
149
  }
150
- .circular-progress-bar__backgroundCircle_1sqfo.circular-progress-bar__stroke_1sqfo {
150
+ .circular-progress-bar__backgroundCircle_gs6rg.circular-progress-bar__stroke_gs6rg {
151
151
  stroke: transparent;
152
152
  }
153
- .circular-progress-bar__progressCircle_1sqfo {
153
+ .circular-progress-bar__progressCircle_gs6rg {
154
154
  stroke-linecap: round
155
155
  }
156
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-positive_1sqfo {
156
+ .circular-progress-bar__progressCircle_gs6rg.circular-progress-bar__bg-positive_gs6rg {
157
157
  fill: var(--circular-progress-bar-positive-color);
158
158
  }
159
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-negative_1sqfo {
159
+ .circular-progress-bar__progressCircle_gs6rg.circular-progress-bar__bg-negative_gs6rg {
160
160
  fill: var(--circular-progress-bar-negative-color);
161
161
  }
162
- .circular-progress-bar__iconWrapper_1sqfo {
162
+ .circular-progress-bar__iconWrapper_gs6rg {
163
163
  display: flex;
164
164
  align-items: center;
165
165
  justify-content: center
166
166
  }
167
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xxl_1sqfo {
167
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xxl_gs6rg {
168
168
  max-width: 64px;
169
169
  max-height: 64px;
170
170
  }
171
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xl_1sqfo {
171
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xl_gs6rg {
172
172
  max-width: 64px;
173
173
  max-height: 64px;
174
174
  }
175
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__l_1sqfo {
175
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__l_gs6rg {
176
176
  max-width: 48px;
177
177
  max-height: 48px;
178
178
  }
179
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__m_1sqfo {
179
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__m_gs6rg {
180
180
  max-width: 36px;
181
181
  max-height: 36px;
182
182
  }
183
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__s_1sqfo {
183
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__s_gs6rg {
184
184
  max-width: 24px;
185
185
  max-height: 24px;
186
186
  }
187
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xs_1sqfo {
187
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xs_gs6rg {
188
188
  max-width: 16px;
189
189
  max-height: 16px;
190
190
  }
191
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-tertiary_1sqfo {
191
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-tertiary_gs6rg {
192
192
  color: var(--color-light-graphic-tertiary);
193
193
  }
194
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-positive_1sqfo {
194
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-positive_gs6rg {
195
195
  color: var(--color-light-graphic-positive);
196
196
  }
197
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-negative_1sqfo {
197
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-negative_gs6rg {
198
198
  color: var(--color-light-graphic-negative);
199
199
  }
200
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary-inverted_1sqfo {
200
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-primary-inverted_gs6rg {
201
201
  color: var(--color-light-graphic-primary-inverted);
202
202
  }
203
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary_1sqfo {
203
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-primary_gs6rg {
204
204
  color: var(--color-light-graphic-primary);
205
205
  }
206
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-secondary_1sqfo {
206
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-secondary_gs6rg {
207
207
  color: var(--color-light-graphic-secondary);
208
208
  }
209
- .circular-progress-bar__icon_1sqfo {
209
+ .circular-progress-bar__icon_gs6rg {
210
210
  width: 100%;
211
211
  height: 100%;
212
212
  }
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export { CircularProgressBar } from './Component.js';
2
- import 'classnames';
3
2
  import 'react';
3
+ import 'classnames';
4
4
  import '@alfalab/core-components-typography/esm';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 6yca2 */
1
+ /* hash: 1ynh1 */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
@@ -34,28 +34,28 @@
34
34
  --circular-progress-bar-font-family: var(--font-family-system);
35
35
  --circular-progress-bar-font-weight: 600;
36
36
  }
37
- .circular-progress-bar__component_1sqfo {
37
+ .circular-progress-bar__component_gs6rg {
38
38
  position: relative;
39
39
  display: flex;
40
40
  justify-content: center;
41
41
  align-items: center;
42
42
  }
43
- .circular-progress-bar__svg_1sqfo {
43
+ .circular-progress-bar__svg_gs6rg {
44
44
  display: block;
45
45
  width: 100%;
46
46
  }
47
- .circular-progress-bar__title_1sqfo,
48
- .circular-progress-bar__subtitle_1sqfo {
47
+ .circular-progress-bar__title_gs6rg,
48
+ .circular-progress-bar__subtitle_gs6rg {
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
54
  }
55
- .circular-progress-bar__subtitle_1sqfo {
55
+ .circular-progress-bar__subtitle_gs6rg {
56
56
  max-height: 40px;
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sqfo {
58
+ .circular-progress-bar__labelWrapper_gs6rg {
59
59
  text-align: center;
60
60
  position: absolute;
61
61
  top: 50%;
@@ -63,150 +63,150 @@
63
63
  width: 100%;
64
64
  transform: translate(-50%, -50%)
65
65
  }
66
- .circular-progress-bar__labelWrapper_1sqfo.circular-progress-bar__label_1sqfo {
66
+ .circular-progress-bar__labelWrapper_gs6rg.circular-progress-bar__label_gs6rg {
67
67
  display: flex;
68
68
  align-items: center;
69
69
  justify-content: center;
70
70
  }
71
- .circular-progress-bar__typography_1sqfo {
71
+ .circular-progress-bar__typography_gs6rg {
72
72
  font-feature-settings: 'ss01';
73
73
  font-weight: var(--circular-progress-bar-font-weight);
74
74
  font-family: var(--circular-progress-bar-font-family);
75
75
  }
76
- .circular-progress-bar__xxl_1sqfo {
76
+ .circular-progress-bar__xxl_gs6rg {
77
77
  width: 144px;
78
78
  height: 144px
79
79
  }
80
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
80
+ .circular-progress-bar__xxl_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
81
81
  max-width: 128px;
82
82
  }
83
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__title_1sqfo {
83
+ .circular-progress-bar__xxl_gs6rg .circular-progress-bar__title_gs6rg {
84
84
  max-height: 32px;
85
85
  }
86
- .circular-progress-bar__xl_1sqfo {
86
+ .circular-progress-bar__xl_gs6rg {
87
87
  width: 128px;
88
88
  height: 128px
89
89
  }
90
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
90
+ .circular-progress-bar__xl_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
91
91
  max-width: 108px;
92
92
  }
93
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__title_1sqfo {
93
+ .circular-progress-bar__xl_gs6rg .circular-progress-bar__title_gs6rg {
94
94
  max-height: 32px;
95
95
  }
96
- .circular-progress-bar__l_1sqfo {
96
+ .circular-progress-bar__l_gs6rg {
97
97
  width: 80px;
98
98
  height: 80px
99
99
  }
100
- .circular-progress-bar__l_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
100
+ .circular-progress-bar__l_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
101
101
  max-width: 64px;
102
102
  }
103
- .circular-progress-bar__l_1sqfo .circular-progress-bar__title_1sqfo {
103
+ .circular-progress-bar__l_gs6rg .circular-progress-bar__title_gs6rg {
104
104
  max-height: 24px;
105
105
  }
106
- .circular-progress-bar__m_1sqfo {
106
+ .circular-progress-bar__m_gs6rg {
107
107
  width: 64px;
108
108
  height: 64px
109
109
  }
110
- .circular-progress-bar__m_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
110
+ .circular-progress-bar__m_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
111
111
  max-width: 48px;
112
112
  }
113
- .circular-progress-bar__m_1sqfo .circular-progress-bar__title_1sqfo {
113
+ .circular-progress-bar__m_gs6rg .circular-progress-bar__title_gs6rg {
114
114
  max-height: 16px;
115
115
  margin: 0;
116
116
  }
117
- .circular-progress-bar__s_1sqfo {
117
+ .circular-progress-bar__s_gs6rg {
118
118
  width: 48px;
119
119
  height: 48px
120
120
  }
121
- .circular-progress-bar__s_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
121
+ .circular-progress-bar__s_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
122
122
  max-width: 40px;
123
123
  }
124
- .circular-progress-bar__s_1sqfo .circular-progress-bar__title_1sqfo {
124
+ .circular-progress-bar__s_gs6rg .circular-progress-bar__title_gs6rg {
125
125
  max-height: 16px;
126
126
  margin: 0;
127
127
  }
128
- .circular-progress-bar__xs_1sqfo {
128
+ .circular-progress-bar__xs_gs6rg {
129
129
  width: 24px;
130
130
  height: 24px
131
131
  }
132
- .circular-progress-bar__xs_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
132
+ .circular-progress-bar__xs_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
133
133
  max-width: 24px;
134
134
  }
135
- .circular-progress-bar__backgroundCircle_1sqfo,
136
- .circular-progress-bar__progressCircle_1sqfo {
135
+ .circular-progress-bar__backgroundCircle_gs6rg,
136
+ .circular-progress-bar__progressCircle_gs6rg {
137
137
  width: 100%;
138
138
  height: 100%;
139
139
  fill: transparent;
140
140
  }
141
- .circular-progress-bar__positive_1sqfo {
141
+ .circular-progress-bar__positive_gs6rg {
142
142
  stroke: var(--circular-progress-bar-positive-color);
143
143
  }
144
- .circular-progress-bar__negative_1sqfo {
144
+ .circular-progress-bar__negative_gs6rg {
145
145
  stroke: var(--circular-progress-bar-negative-color);
146
146
  }
147
- .circular-progress-bar__backgroundCircle_1sqfo {
147
+ .circular-progress-bar__backgroundCircle_gs6rg {
148
148
  stroke: var(--circular-progress-bar-bg-color)
149
149
  }
150
- .circular-progress-bar__backgroundCircle_1sqfo.circular-progress-bar__stroke_1sqfo {
150
+ .circular-progress-bar__backgroundCircle_gs6rg.circular-progress-bar__stroke_gs6rg {
151
151
  stroke: transparent;
152
152
  }
153
- .circular-progress-bar__progressCircle_1sqfo {
153
+ .circular-progress-bar__progressCircle_gs6rg {
154
154
  stroke-linecap: round
155
155
  }
156
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-positive_1sqfo {
156
+ .circular-progress-bar__progressCircle_gs6rg.circular-progress-bar__bg-positive_gs6rg {
157
157
  fill: var(--circular-progress-bar-positive-color);
158
158
  }
159
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-negative_1sqfo {
159
+ .circular-progress-bar__progressCircle_gs6rg.circular-progress-bar__bg-negative_gs6rg {
160
160
  fill: var(--circular-progress-bar-negative-color);
161
161
  }
162
- .circular-progress-bar__iconWrapper_1sqfo {
162
+ .circular-progress-bar__iconWrapper_gs6rg {
163
163
  display: flex;
164
164
  align-items: center;
165
165
  justify-content: center
166
166
  }
167
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xxl_1sqfo {
167
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xxl_gs6rg {
168
168
  max-width: 64px;
169
169
  max-height: 64px;
170
170
  }
171
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xl_1sqfo {
171
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xl_gs6rg {
172
172
  max-width: 64px;
173
173
  max-height: 64px;
174
174
  }
175
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__l_1sqfo {
175
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__l_gs6rg {
176
176
  max-width: 48px;
177
177
  max-height: 48px;
178
178
  }
179
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__m_1sqfo {
179
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__m_gs6rg {
180
180
  max-width: 36px;
181
181
  max-height: 36px;
182
182
  }
183
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__s_1sqfo {
183
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__s_gs6rg {
184
184
  max-width: 24px;
185
185
  max-height: 24px;
186
186
  }
187
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xs_1sqfo {
187
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xs_gs6rg {
188
188
  max-width: 16px;
189
189
  max-height: 16px;
190
190
  }
191
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-tertiary_1sqfo {
191
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-tertiary_gs6rg {
192
192
  color: var(--color-light-graphic-tertiary);
193
193
  }
194
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-positive_1sqfo {
194
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-positive_gs6rg {
195
195
  color: var(--color-light-graphic-positive);
196
196
  }
197
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-negative_1sqfo {
197
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-negative_gs6rg {
198
198
  color: var(--color-light-graphic-negative);
199
199
  }
200
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary-inverted_1sqfo {
200
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-primary-inverted_gs6rg {
201
201
  color: var(--color-light-graphic-primary-inverted);
202
202
  }
203
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary_1sqfo {
203
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-primary_gs6rg {
204
204
  color: var(--color-light-graphic-primary);
205
205
  }
206
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-secondary_1sqfo {
206
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-secondary_gs6rg {
207
207
  color: var(--color-light-graphic-secondary);
208
208
  }
209
- .circular-progress-bar__icon_1sqfo {
209
+ .circular-progress-bar__icon_gs6rg {
210
210
  width: 100%;
211
211
  height: 100%;
212
212
  }
package/index.js CHANGED
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('classnames');
7
6
  require('react');
7
+ require('classnames');
8
8
  require('@alfalab/core-components-typography');
9
9
 
10
10
 
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode, ElementType } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
package/modern/Component.js CHANGED
@@ -1,8 +1,8 @@
1
- import cn from 'classnames';
2
1
  import React, { useMemo } from 'react';
2
+ import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
4
 
5
- var styles = {"component":"circular-progress-bar__component_1sqfo","svg":"circular-progress-bar__svg_1sqfo","title":"circular-progress-bar__title_1sqfo","subtitle":"circular-progress-bar__subtitle_1sqfo","labelWrapper":"circular-progress-bar__labelWrapper_1sqfo","label":"circular-progress-bar__label_1sqfo","typography":"circular-progress-bar__typography_1sqfo","xxl":"circular-progress-bar__xxl_1sqfo","xl":"circular-progress-bar__xl_1sqfo","l":"circular-progress-bar__l_1sqfo","m":"circular-progress-bar__m_1sqfo","s":"circular-progress-bar__s_1sqfo","xs":"circular-progress-bar__xs_1sqfo","backgroundCircle":"circular-progress-bar__backgroundCircle_1sqfo","progressCircle":"circular-progress-bar__progressCircle_1sqfo","positive":"circular-progress-bar__positive_1sqfo","negative":"circular-progress-bar__negative_1sqfo","stroke":"circular-progress-bar__stroke_1sqfo","bg-positive":"circular-progress-bar__bg-positive_1sqfo","bg-negative":"circular-progress-bar__bg-negative_1sqfo","iconWrapper":"circular-progress-bar__iconWrapper_1sqfo","icon-tertiary":"circular-progress-bar__icon-tertiary_1sqfo","icon-positive":"circular-progress-bar__icon-positive_1sqfo","icon-negative":"circular-progress-bar__icon-negative_1sqfo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1sqfo","icon-primary":"circular-progress-bar__icon-primary_1sqfo","icon-secondary":"circular-progress-bar__icon-secondary_1sqfo","icon":"circular-progress-bar__icon_1sqfo"};
5
+ var styles = {"component":"circular-progress-bar__component_gs6rg","svg":"circular-progress-bar__svg_gs6rg","title":"circular-progress-bar__title_gs6rg","subtitle":"circular-progress-bar__subtitle_gs6rg","labelWrapper":"circular-progress-bar__labelWrapper_gs6rg","label":"circular-progress-bar__label_gs6rg","typography":"circular-progress-bar__typography_gs6rg","xxl":"circular-progress-bar__xxl_gs6rg","xl":"circular-progress-bar__xl_gs6rg","l":"circular-progress-bar__l_gs6rg","m":"circular-progress-bar__m_gs6rg","s":"circular-progress-bar__s_gs6rg","xs":"circular-progress-bar__xs_gs6rg","backgroundCircle":"circular-progress-bar__backgroundCircle_gs6rg","progressCircle":"circular-progress-bar__progressCircle_gs6rg","positive":"circular-progress-bar__positive_gs6rg","negative":"circular-progress-bar__negative_gs6rg","stroke":"circular-progress-bar__stroke_gs6rg","bg-positive":"circular-progress-bar__bg-positive_gs6rg","bg-negative":"circular-progress-bar__bg-negative_gs6rg","iconWrapper":"circular-progress-bar__iconWrapper_gs6rg","icon-tertiary":"circular-progress-bar__icon-tertiary_gs6rg","icon-positive":"circular-progress-bar__icon-positive_gs6rg","icon-negative":"circular-progress-bar__icon-negative_gs6rg","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_gs6rg","icon-primary":"circular-progress-bar__icon-primary_gs6rg","icon-secondary":"circular-progress-bar__icon-secondary_gs6rg","icon":"circular-progress-bar__icon_gs6rg"};
6
6
  require('./index.css')
7
7
 
8
8
  const SIZES = {
@@ -67,16 +67,12 @@ const CircularProgressBar = ({ value, view = 'positive', size = 'm', className,
67
67
  const titleContent = titleComplete && isComplete ? titleComplete : title;
68
68
  const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
69
69
  const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
70
- const renderTitleString = () => {
71
- return (React.createElement(React.Fragment, null, 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))));
72
- };
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));
73
71
  const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
74
72
  const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
75
- const renderIcon = () => {
76
- return (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles[`icon-${contentColor}`], {
77
- [styles[`icon-${completeIconColor}`]]: completeIconColor,
78
- }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
79
- };
73
+ const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles[`icon-${contentColor}`], {
74
+ [styles[`icon-${completeIconColor}`]]: completeIconColor,
75
+ }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
80
76
  const renderContent = () => Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
81
77
  SIZES[size] > 24 && renderTitle(),
82
78
  SIZES[size] > 64 && renderSubTitle()));
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 6yca2 */
1
+ /* hash: 1ynh1 */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
@@ -34,28 +34,28 @@
34
34
  --circular-progress-bar-font-family: var(--font-family-system);
35
35
  --circular-progress-bar-font-weight: 600;
36
36
  }
37
- .circular-progress-bar__component_1sqfo {
37
+ .circular-progress-bar__component_gs6rg {
38
38
  position: relative;
39
39
  display: flex;
40
40
  justify-content: center;
41
41
  align-items: center;
42
42
  }
43
- .circular-progress-bar__svg_1sqfo {
43
+ .circular-progress-bar__svg_gs6rg {
44
44
  display: block;
45
45
  width: 100%;
46
46
  }
47
- .circular-progress-bar__title_1sqfo,
48
- .circular-progress-bar__subtitle_1sqfo {
47
+ .circular-progress-bar__title_gs6rg,
48
+ .circular-progress-bar__subtitle_gs6rg {
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
54
  }
55
- .circular-progress-bar__subtitle_1sqfo {
55
+ .circular-progress-bar__subtitle_gs6rg {
56
56
  max-height: 40px;
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sqfo {
58
+ .circular-progress-bar__labelWrapper_gs6rg {
59
59
  text-align: center;
60
60
  position: absolute;
61
61
  top: 50%;
@@ -63,150 +63,150 @@
63
63
  width: 100%;
64
64
  transform: translate(-50%, -50%)
65
65
  }
66
- .circular-progress-bar__labelWrapper_1sqfo.circular-progress-bar__label_1sqfo {
66
+ .circular-progress-bar__labelWrapper_gs6rg.circular-progress-bar__label_gs6rg {
67
67
  display: flex;
68
68
  align-items: center;
69
69
  justify-content: center;
70
70
  }
71
- .circular-progress-bar__typography_1sqfo {
71
+ .circular-progress-bar__typography_gs6rg {
72
72
  font-feature-settings: 'ss01';
73
73
  font-weight: var(--circular-progress-bar-font-weight);
74
74
  font-family: var(--circular-progress-bar-font-family);
75
75
  }
76
- .circular-progress-bar__xxl_1sqfo {
76
+ .circular-progress-bar__xxl_gs6rg {
77
77
  width: 144px;
78
78
  height: 144px
79
79
  }
80
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
80
+ .circular-progress-bar__xxl_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
81
81
  max-width: 128px;
82
82
  }
83
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__title_1sqfo {
83
+ .circular-progress-bar__xxl_gs6rg .circular-progress-bar__title_gs6rg {
84
84
  max-height: 32px;
85
85
  }
86
- .circular-progress-bar__xl_1sqfo {
86
+ .circular-progress-bar__xl_gs6rg {
87
87
  width: 128px;
88
88
  height: 128px
89
89
  }
90
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
90
+ .circular-progress-bar__xl_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
91
91
  max-width: 108px;
92
92
  }
93
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__title_1sqfo {
93
+ .circular-progress-bar__xl_gs6rg .circular-progress-bar__title_gs6rg {
94
94
  max-height: 32px;
95
95
  }
96
- .circular-progress-bar__l_1sqfo {
96
+ .circular-progress-bar__l_gs6rg {
97
97
  width: 80px;
98
98
  height: 80px
99
99
  }
100
- .circular-progress-bar__l_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
100
+ .circular-progress-bar__l_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
101
101
  max-width: 64px;
102
102
  }
103
- .circular-progress-bar__l_1sqfo .circular-progress-bar__title_1sqfo {
103
+ .circular-progress-bar__l_gs6rg .circular-progress-bar__title_gs6rg {
104
104
  max-height: 24px;
105
105
  }
106
- .circular-progress-bar__m_1sqfo {
106
+ .circular-progress-bar__m_gs6rg {
107
107
  width: 64px;
108
108
  height: 64px
109
109
  }
110
- .circular-progress-bar__m_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
110
+ .circular-progress-bar__m_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
111
111
  max-width: 48px;
112
112
  }
113
- .circular-progress-bar__m_1sqfo .circular-progress-bar__title_1sqfo {
113
+ .circular-progress-bar__m_gs6rg .circular-progress-bar__title_gs6rg {
114
114
  max-height: 16px;
115
115
  margin: 0;
116
116
  }
117
- .circular-progress-bar__s_1sqfo {
117
+ .circular-progress-bar__s_gs6rg {
118
118
  width: 48px;
119
119
  height: 48px
120
120
  }
121
- .circular-progress-bar__s_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
121
+ .circular-progress-bar__s_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
122
122
  max-width: 40px;
123
123
  }
124
- .circular-progress-bar__s_1sqfo .circular-progress-bar__title_1sqfo {
124
+ .circular-progress-bar__s_gs6rg .circular-progress-bar__title_gs6rg {
125
125
  max-height: 16px;
126
126
  margin: 0;
127
127
  }
128
- .circular-progress-bar__xs_1sqfo {
128
+ .circular-progress-bar__xs_gs6rg {
129
129
  width: 24px;
130
130
  height: 24px
131
131
  }
132
- .circular-progress-bar__xs_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
132
+ .circular-progress-bar__xs_gs6rg .circular-progress-bar__labelWrapper_gs6rg {
133
133
  max-width: 24px;
134
134
  }
135
- .circular-progress-bar__backgroundCircle_1sqfo,
136
- .circular-progress-bar__progressCircle_1sqfo {
135
+ .circular-progress-bar__backgroundCircle_gs6rg,
136
+ .circular-progress-bar__progressCircle_gs6rg {
137
137
  width: 100%;
138
138
  height: 100%;
139
139
  fill: transparent;
140
140
  }
141
- .circular-progress-bar__positive_1sqfo {
141
+ .circular-progress-bar__positive_gs6rg {
142
142
  stroke: var(--circular-progress-bar-positive-color);
143
143
  }
144
- .circular-progress-bar__negative_1sqfo {
144
+ .circular-progress-bar__negative_gs6rg {
145
145
  stroke: var(--circular-progress-bar-negative-color);
146
146
  }
147
- .circular-progress-bar__backgroundCircle_1sqfo {
147
+ .circular-progress-bar__backgroundCircle_gs6rg {
148
148
  stroke: var(--circular-progress-bar-bg-color)
149
149
  }
150
- .circular-progress-bar__backgroundCircle_1sqfo.circular-progress-bar__stroke_1sqfo {
150
+ .circular-progress-bar__backgroundCircle_gs6rg.circular-progress-bar__stroke_gs6rg {
151
151
  stroke: transparent;
152
152
  }
153
- .circular-progress-bar__progressCircle_1sqfo {
153
+ .circular-progress-bar__progressCircle_gs6rg {
154
154
  stroke-linecap: round
155
155
  }
156
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-positive_1sqfo {
156
+ .circular-progress-bar__progressCircle_gs6rg.circular-progress-bar__bg-positive_gs6rg {
157
157
  fill: var(--circular-progress-bar-positive-color);
158
158
  }
159
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-negative_1sqfo {
159
+ .circular-progress-bar__progressCircle_gs6rg.circular-progress-bar__bg-negative_gs6rg {
160
160
  fill: var(--circular-progress-bar-negative-color);
161
161
  }
162
- .circular-progress-bar__iconWrapper_1sqfo {
162
+ .circular-progress-bar__iconWrapper_gs6rg {
163
163
  display: flex;
164
164
  align-items: center;
165
165
  justify-content: center
166
166
  }
167
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xxl_1sqfo {
167
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xxl_gs6rg {
168
168
  max-width: 64px;
169
169
  max-height: 64px;
170
170
  }
171
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xl_1sqfo {
171
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xl_gs6rg {
172
172
  max-width: 64px;
173
173
  max-height: 64px;
174
174
  }
175
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__l_1sqfo {
175
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__l_gs6rg {
176
176
  max-width: 48px;
177
177
  max-height: 48px;
178
178
  }
179
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__m_1sqfo {
179
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__m_gs6rg {
180
180
  max-width: 36px;
181
181
  max-height: 36px;
182
182
  }
183
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__s_1sqfo {
183
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__s_gs6rg {
184
184
  max-width: 24px;
185
185
  max-height: 24px;
186
186
  }
187
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xs_1sqfo {
187
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__xs_gs6rg {
188
188
  max-width: 16px;
189
189
  max-height: 16px;
190
190
  }
191
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-tertiary_1sqfo {
191
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-tertiary_gs6rg {
192
192
  color: var(--color-light-graphic-tertiary);
193
193
  }
194
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-positive_1sqfo {
194
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-positive_gs6rg {
195
195
  color: var(--color-light-graphic-positive);
196
196
  }
197
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-negative_1sqfo {
197
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-negative_gs6rg {
198
198
  color: var(--color-light-graphic-negative);
199
199
  }
200
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary-inverted_1sqfo {
200
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-primary-inverted_gs6rg {
201
201
  color: var(--color-light-graphic-primary-inverted);
202
202
  }
203
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary_1sqfo {
203
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-primary_gs6rg {
204
204
  color: var(--color-light-graphic-primary);
205
205
  }
206
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-secondary_1sqfo {
206
+ .circular-progress-bar__iconWrapper_gs6rg.circular-progress-bar__icon-secondary_gs6rg {
207
207
  color: var(--color-light-graphic-secondary);
208
208
  }
209
- .circular-progress-bar__icon_1sqfo {
209
+ .circular-progress-bar__icon_gs6rg {
210
210
  width: 100%;
211
211
  height: 100%;
212
212
  }
package/modern/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import 'classnames';
2
1
  import 'react';
2
+ import 'classnames';
3
3
  import '@alfalab/core-components-typography/modern';
4
4
  export { CircularProgressBar } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,7 +14,7 @@
14
14
  "directory": "dist"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-typography": "^3.0.1",
17
+ "@alfalab/core-components-typography": "^3.0.3",
18
18
  "classnames": "^2.3.1"
19
19
  },
20
20
  "peerDependencies": {