@alfalab/core-components-circular-progress-bar 3.4.2 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/Component.d.ts +2 -1
  2. package/Component.js +6 -6
  3. package/consts.d.ts +39 -1
  4. package/consts.js +39 -0
  5. package/cssm/Component.d.ts +2 -1
  6. package/cssm/Component.js +5 -5
  7. package/cssm/consts.d.ts +39 -1
  8. package/cssm/consts.js +39 -0
  9. package/cssm/index.js +0 -6
  10. package/cssm/index.module.css +24 -24
  11. package/esm/Component.d.ts +2 -1
  12. package/esm/Component.js +7 -7
  13. package/esm/consts.d.ts +39 -1
  14. package/esm/consts.js +39 -1
  15. package/esm/index.css +50 -50
  16. package/esm/index.js +0 -5
  17. package/index.css +50 -50
  18. package/index.js +0 -5
  19. package/modern/Component.d.ts +2 -1
  20. package/modern/Component.js +7 -7
  21. package/modern/consts.d.ts +39 -1
  22. package/modern/consts.js +39 -1
  23. package/modern/index.css +50 -50
  24. package/modern/index.js +0 -4
  25. package/package.json +2 -2
  26. package/src/Component.tsx +19 -7
  27. package/src/consts.ts +39 -0
  28. package/src/index.module.css +12 -12
package/esm/consts.js CHANGED
@@ -5,6 +5,12 @@ var SIZES = {
5
5
  l: 80,
6
6
  xl: 128,
7
7
  xxl: 144,
8
+ 24: 24,
9
+ 48: 48,
10
+ 64: 64,
11
+ 80: 80,
12
+ 128: 128,
13
+ 144: 144,
8
14
  };
9
15
  var STROKE = {
10
16
  xs: 4,
@@ -13,6 +19,12 @@ var STROKE = {
13
19
  l: 8,
14
20
  xl: 10,
15
21
  xxl: 12,
22
+ 24: 4,
23
+ 48: 4,
24
+ 64: 6,
25
+ 80: 8,
26
+ 128: 10,
27
+ 144: 12,
16
28
  };
17
29
  var VIEW_TITLE = {
18
30
  xs: 'small',
@@ -21,6 +33,12 @@ var VIEW_TITLE = {
21
33
  l: 'xsmall',
22
34
  xl: 'medium',
23
35
  xxl: 'medium',
36
+ 24: 'small',
37
+ 48: 'small',
38
+ 64: 'small',
39
+ 80: 'xsmall',
40
+ 128: 'medium',
41
+ 144: 'medium',
24
42
  };
25
43
  var VIEW_TEXT = {
26
44
  xs: 'secondary-small',
@@ -29,7 +47,27 @@ var VIEW_TEXT = {
29
47
  l: 'secondary-large',
30
48
  xl: 'secondary-large',
31
49
  xxl: 'secondary-large',
50
+ 24: 'secondary-small',
51
+ 48: 'secondary-small',
52
+ 64: 'secondary-large',
53
+ 80: 'secondary-large',
54
+ 128: 'secondary-large',
55
+ 144: 'secondary-large',
32
56
  };
33
57
  var TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
58
+ var SIZE_TO_CLASSNAME_MAP = {
59
+ xs: 'size-24',
60
+ s: 'size-48',
61
+ m: 'size-64',
62
+ l: 'size-80',
63
+ xl: 'size-128',
64
+ xxl: 'size-144',
65
+ 24: 'size-24',
66
+ 48: 'size-48',
67
+ 64: 'size-64',
68
+ 80: 'size-80',
69
+ 128: 'size-128',
70
+ 144: 'size-144',
71
+ };
34
72
 
35
- export { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
73
+ export { SIZES, SIZE_TO_CLASSNAME_MAP, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
package/esm/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 1tjsl */
2
- :root {
1
+ /* hash: 1m7tb */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-1500: #0e0e0e;
5
5
  --color-light-neutral-1500-inverted: #fff;
@@ -37,135 +37,135 @@
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_if9gi {
40
+ } .circular-progress-bar__component_o79lq {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_if9gi.circular-progress-bar__bg-positive_if9gi {
46
+ } .circular-progress-bar__component_o79lq.circular-progress-bar__bg-positive_o79lq {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_if9gi.circular-progress-bar__bg-negative_if9gi {
48
+ } .circular-progress-bar__component_o79lq.circular-progress-bar__bg-negative_o79lq {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_if9gi {
50
+ } .circular-progress-bar__svg_o79lq {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_if9gi,
54
- .circular-progress-bar__subtitle_if9gi {
53
+ } .circular-progress-bar__title_o79lq,
54
+ .circular-progress-bar__subtitle_o79lq {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_if9gi {
60
+ } .circular-progress-bar__subtitle_o79lq {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_if9gi {
62
+ } .circular-progress-bar__labelWrapper_o79lq {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_if9gi.circular-progress-bar__label_if9gi {
69
+ } .circular-progress-bar__labelWrapper_o79lq.circular-progress-bar__label_o79lq {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_if9gi {
73
+ } .circular-progress-bar__typography_o79lq {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_if9gi {
77
+ } .circular-progress-bar__size-144_o79lq {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_if9gi .circular-progress-bar__labelWrapper_if9gi {
80
+ } .circular-progress-bar__size-144_o79lq .circular-progress-bar__labelWrapper_o79lq {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_if9gi .circular-progress-bar__title_if9gi {
82
+ } .circular-progress-bar__size-144_o79lq .circular-progress-bar__title_o79lq {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_if9gi {
84
+ } .circular-progress-bar__size-128_o79lq {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_if9gi .circular-progress-bar__labelWrapper_if9gi {
87
+ } .circular-progress-bar__size-128_o79lq .circular-progress-bar__labelWrapper_o79lq {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_if9gi .circular-progress-bar__title_if9gi {
89
+ } .circular-progress-bar__size-128_o79lq .circular-progress-bar__title_o79lq {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_if9gi {
91
+ } .circular-progress-bar__size-80_o79lq {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_if9gi .circular-progress-bar__labelWrapper_if9gi {
94
+ } .circular-progress-bar__size-80_o79lq .circular-progress-bar__labelWrapper_o79lq {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_if9gi .circular-progress-bar__title_if9gi {
96
+ } .circular-progress-bar__size-80_o79lq .circular-progress-bar__title_o79lq {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_if9gi {
98
+ } .circular-progress-bar__size-64_o79lq {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_if9gi .circular-progress-bar__labelWrapper_if9gi {
101
+ } .circular-progress-bar__size-64_o79lq .circular-progress-bar__labelWrapper_o79lq {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_if9gi .circular-progress-bar__title_if9gi {
103
+ } .circular-progress-bar__size-64_o79lq .circular-progress-bar__title_o79lq {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_if9gi {
106
+ } .circular-progress-bar__size-48_o79lq {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_if9gi .circular-progress-bar__labelWrapper_if9gi {
109
+ } .circular-progress-bar__size-48_o79lq .circular-progress-bar__labelWrapper_o79lq {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_if9gi .circular-progress-bar__title_if9gi {
111
+ } .circular-progress-bar__size-48_o79lq .circular-progress-bar__title_o79lq {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_if9gi {
114
+ } .circular-progress-bar__size-24_o79lq {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_if9gi .circular-progress-bar__labelWrapper_if9gi {
117
+ } .circular-progress-bar__size-24_o79lq .circular-progress-bar__labelWrapper_o79lq {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_if9gi,
120
- .circular-progress-bar__progressCircle_if9gi {
119
+ } .circular-progress-bar__backgroundCircle_o79lq,
120
+ .circular-progress-bar__progressCircle_o79lq {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_if9gi {
124
+ } .circular-progress-bar__positive_o79lq {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_if9gi {
126
+ } .circular-progress-bar__negative_o79lq {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_if9gi {
128
+ } .circular-progress-bar__backgroundCircle_o79lq {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_if9gi.circular-progress-bar__stroke_if9gi {
130
+ } .circular-progress-bar__backgroundCircle_o79lq.circular-progress-bar__stroke_o79lq {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_if9gi {
132
+ } .circular-progress-bar__progressCircle_o79lq {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_if9gi {
134
+ } .circular-progress-bar__iconWrapper_o79lq {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xxl_if9gi {
138
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-144_o79lq {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xl_if9gi {
141
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-128_o79lq {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__l_if9gi {
144
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-80_o79lq {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__m_if9gi {
147
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-64_o79lq {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__s_if9gi {
150
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-48_o79lq {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xs_if9gi {
153
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-24_o79lq {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-tertiary_if9gi {
156
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-tertiary_o79lq {
157
157
  color: var(--color-light-neutral-500);
158
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-positive_if9gi {
158
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-positive_o79lq {
159
159
  color: var(--color-light-status-positive);
160
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-negative_if9gi {
160
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-negative_o79lq {
161
161
  color: var(--color-light-status-negative);
162
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-primary-inverted_if9gi {
162
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-primary-inverted_o79lq {
163
163
  color: var(--color-light-neutral-1500-inverted);
164
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-primary_if9gi {
164
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-primary_o79lq {
165
165
  color: var(--color-light-neutral-1500);
166
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-secondary_if9gi {
166
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-secondary_o79lq {
167
167
  color: var(--color-light-neutral-700);
168
- } .circular-progress-bar__icon_if9gi {
168
+ } .circular-progress-bar__icon_o79lq {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/esm/index.js CHANGED
@@ -1,6 +1 @@
1
1
  export { CircularProgressBar } from './Component.js';
2
- import 'tslib';
3
- import 'react';
4
- import 'classnames';
5
- import '@alfalab/core-components-typography/esm';
6
- import './consts.js';
package/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 1tjsl */
2
- :root {
1
+ /* hash: 1m7tb */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-1500: #0e0e0e;
5
5
  --color-light-neutral-1500-inverted: #fff;
@@ -37,135 +37,135 @@
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_if9gi {
40
+ } .circular-progress-bar__component_o79lq {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_if9gi.circular-progress-bar__bg-positive_if9gi {
46
+ } .circular-progress-bar__component_o79lq.circular-progress-bar__bg-positive_o79lq {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_if9gi.circular-progress-bar__bg-negative_if9gi {
48
+ } .circular-progress-bar__component_o79lq.circular-progress-bar__bg-negative_o79lq {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_if9gi {
50
+ } .circular-progress-bar__svg_o79lq {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_if9gi,
54
- .circular-progress-bar__subtitle_if9gi {
53
+ } .circular-progress-bar__title_o79lq,
54
+ .circular-progress-bar__subtitle_o79lq {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_if9gi {
60
+ } .circular-progress-bar__subtitle_o79lq {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_if9gi {
62
+ } .circular-progress-bar__labelWrapper_o79lq {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_if9gi.circular-progress-bar__label_if9gi {
69
+ } .circular-progress-bar__labelWrapper_o79lq.circular-progress-bar__label_o79lq {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_if9gi {
73
+ } .circular-progress-bar__typography_o79lq {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_if9gi {
77
+ } .circular-progress-bar__size-144_o79lq {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_if9gi .circular-progress-bar__labelWrapper_if9gi {
80
+ } .circular-progress-bar__size-144_o79lq .circular-progress-bar__labelWrapper_o79lq {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_if9gi .circular-progress-bar__title_if9gi {
82
+ } .circular-progress-bar__size-144_o79lq .circular-progress-bar__title_o79lq {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_if9gi {
84
+ } .circular-progress-bar__size-128_o79lq {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_if9gi .circular-progress-bar__labelWrapper_if9gi {
87
+ } .circular-progress-bar__size-128_o79lq .circular-progress-bar__labelWrapper_o79lq {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_if9gi .circular-progress-bar__title_if9gi {
89
+ } .circular-progress-bar__size-128_o79lq .circular-progress-bar__title_o79lq {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_if9gi {
91
+ } .circular-progress-bar__size-80_o79lq {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_if9gi .circular-progress-bar__labelWrapper_if9gi {
94
+ } .circular-progress-bar__size-80_o79lq .circular-progress-bar__labelWrapper_o79lq {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_if9gi .circular-progress-bar__title_if9gi {
96
+ } .circular-progress-bar__size-80_o79lq .circular-progress-bar__title_o79lq {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_if9gi {
98
+ } .circular-progress-bar__size-64_o79lq {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_if9gi .circular-progress-bar__labelWrapper_if9gi {
101
+ } .circular-progress-bar__size-64_o79lq .circular-progress-bar__labelWrapper_o79lq {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_if9gi .circular-progress-bar__title_if9gi {
103
+ } .circular-progress-bar__size-64_o79lq .circular-progress-bar__title_o79lq {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_if9gi {
106
+ } .circular-progress-bar__size-48_o79lq {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_if9gi .circular-progress-bar__labelWrapper_if9gi {
109
+ } .circular-progress-bar__size-48_o79lq .circular-progress-bar__labelWrapper_o79lq {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_if9gi .circular-progress-bar__title_if9gi {
111
+ } .circular-progress-bar__size-48_o79lq .circular-progress-bar__title_o79lq {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_if9gi {
114
+ } .circular-progress-bar__size-24_o79lq {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_if9gi .circular-progress-bar__labelWrapper_if9gi {
117
+ } .circular-progress-bar__size-24_o79lq .circular-progress-bar__labelWrapper_o79lq {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_if9gi,
120
- .circular-progress-bar__progressCircle_if9gi {
119
+ } .circular-progress-bar__backgroundCircle_o79lq,
120
+ .circular-progress-bar__progressCircle_o79lq {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_if9gi {
124
+ } .circular-progress-bar__positive_o79lq {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_if9gi {
126
+ } .circular-progress-bar__negative_o79lq {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_if9gi {
128
+ } .circular-progress-bar__backgroundCircle_o79lq {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_if9gi.circular-progress-bar__stroke_if9gi {
130
+ } .circular-progress-bar__backgroundCircle_o79lq.circular-progress-bar__stroke_o79lq {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_if9gi {
132
+ } .circular-progress-bar__progressCircle_o79lq {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_if9gi {
134
+ } .circular-progress-bar__iconWrapper_o79lq {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xxl_if9gi {
138
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-144_o79lq {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xl_if9gi {
141
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-128_o79lq {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__l_if9gi {
144
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-80_o79lq {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__m_if9gi {
147
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-64_o79lq {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__s_if9gi {
150
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-48_o79lq {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xs_if9gi {
153
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-24_o79lq {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-tertiary_if9gi {
156
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-tertiary_o79lq {
157
157
  color: var(--color-light-neutral-500);
158
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-positive_if9gi {
158
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-positive_o79lq {
159
159
  color: var(--color-light-status-positive);
160
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-negative_if9gi {
160
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-negative_o79lq {
161
161
  color: var(--color-light-status-negative);
162
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-primary-inverted_if9gi {
162
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-primary-inverted_o79lq {
163
163
  color: var(--color-light-neutral-1500-inverted);
164
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-primary_if9gi {
164
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-primary_o79lq {
165
165
  color: var(--color-light-neutral-1500);
166
- } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-secondary_if9gi {
166
+ } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-secondary_o79lq {
167
167
  color: var(--color-light-neutral-700);
168
- } .circular-progress-bar__icon_if9gi {
168
+ } .circular-progress-bar__icon_o79lq {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/index.js CHANGED
@@ -3,11 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('tslib');
7
- require('react');
8
- require('classnames');
9
- require('@alfalab/core-components-typography');
10
- require('./consts.js');
11
6
 
12
7
 
13
8
 
package/modern/Component.d.ts CHANGED
@@ -37,8 +37,9 @@ type CircularProgressBarProps = {
37
37
  view?: 'positive' | 'negative';
38
38
  /**
39
39
  * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
40
+ * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
40
41
  */
41
- size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
42
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
42
43
  /**
43
44
  * Наличие желоба
44
45
  */
package/modern/Component.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
- import { STROKE, SIZES, TYPOGRAPHY_COLOR, VIEW_TITLE, VIEW_TEXT } from './consts.js';
4
+ import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
5
 
6
- const styles = {"component":"circular-progress-bar__component_if9gi","bg-positive":"circular-progress-bar__bg-positive_if9gi","bg-negative":"circular-progress-bar__bg-negative_if9gi","svg":"circular-progress-bar__svg_if9gi","title":"circular-progress-bar__title_if9gi","subtitle":"circular-progress-bar__subtitle_if9gi","labelWrapper":"circular-progress-bar__labelWrapper_if9gi","label":"circular-progress-bar__label_if9gi","typography":"circular-progress-bar__typography_if9gi","xxl":"circular-progress-bar__xxl_if9gi","xl":"circular-progress-bar__xl_if9gi","l":"circular-progress-bar__l_if9gi","m":"circular-progress-bar__m_if9gi","s":"circular-progress-bar__s_if9gi","xs":"circular-progress-bar__xs_if9gi","backgroundCircle":"circular-progress-bar__backgroundCircle_if9gi","progressCircle":"circular-progress-bar__progressCircle_if9gi","positive":"circular-progress-bar__positive_if9gi","negative":"circular-progress-bar__negative_if9gi","stroke":"circular-progress-bar__stroke_if9gi","iconWrapper":"circular-progress-bar__iconWrapper_if9gi","icon-tertiary":"circular-progress-bar__icon-tertiary_if9gi","icon-positive":"circular-progress-bar__icon-positive_if9gi","icon-negative":"circular-progress-bar__icon-negative_if9gi","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_if9gi","icon-primary":"circular-progress-bar__icon-primary_if9gi","icon-secondary":"circular-progress-bar__icon-secondary_if9gi","icon":"circular-progress-bar__icon_if9gi"};
6
+ const styles = {"component":"circular-progress-bar__component_o79lq","bg-positive":"circular-progress-bar__bg-positive_o79lq","bg-negative":"circular-progress-bar__bg-negative_o79lq","svg":"circular-progress-bar__svg_o79lq","title":"circular-progress-bar__title_o79lq","subtitle":"circular-progress-bar__subtitle_o79lq","labelWrapper":"circular-progress-bar__labelWrapper_o79lq","label":"circular-progress-bar__label_o79lq","typography":"circular-progress-bar__typography_o79lq","size-144":"circular-progress-bar__size-144_o79lq","size-128":"circular-progress-bar__size-128_o79lq","size-80":"circular-progress-bar__size-80_o79lq","size-64":"circular-progress-bar__size-64_o79lq","size-48":"circular-progress-bar__size-48_o79lq","size-24":"circular-progress-bar__size-24_o79lq","backgroundCircle":"circular-progress-bar__backgroundCircle_o79lq","progressCircle":"circular-progress-bar__progressCircle_o79lq","positive":"circular-progress-bar__positive_o79lq","negative":"circular-progress-bar__negative_o79lq","stroke":"circular-progress-bar__stroke_o79lq","iconWrapper":"circular-progress-bar__iconWrapper_o79lq","icon-tertiary":"circular-progress-bar__icon-tertiary_o79lq","icon-positive":"circular-progress-bar__icon-positive_o79lq","icon-negative":"circular-progress-bar__icon-negative_o79lq","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_o79lq","icon-primary":"circular-progress-bar__icon-primary_o79lq","icon-secondary":"circular-progress-bar__icon-secondary_o79lq","icon":"circular-progress-bar__icon_o79lq"};
7
7
  require('./index.css')
8
8
 
9
9
  /**
10
10
  * Компонент круглого прогресс бара.
11
11
  */
12
- const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, strokeColor, }) => {
12
+ const CircularProgressBar = ({ value, view = 'positive', size = 64, className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, strokeColor, }) => {
13
13
  const memorized = useMemo(() => {
14
14
  const strokeWidth = STROKE[size];
15
15
  const maxProgress = 100;
@@ -48,25 +48,25 @@ const CircularProgressBar = ({ value, view = 'positive', size = 'm', className,
48
48
  const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
49
49
  ...(!typographyContentColor && { color: contentColor }),
50
50
  } }, subtitleContent)) : (subtitleContent);
51
- const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles[`icon-${contentColor}`], {
51
+ const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles[`icon-${contentColor}`], {
52
52
  [styles[`icon-${completeIconColor}`]]: completeIconColor,
53
53
  }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
54
54
  const renderContent = () => Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
55
55
  SIZES[size] > 24 && renderTitle(),
56
56
  SIZES[size] > 64 && renderSubTitle()));
57
- return (React.createElement("div", { className: cn(styles.component, styles[size], className, {
57
+ return (React.createElement("div", { className: cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {
58
58
  [styles[`bg-${view}`]]: fillComplete && isComplete,
59
59
  }), style: {
60
60
  ...(height && { height, width: height }),
61
61
  ...(circleColor && { backgroundColor: circleColor }),
62
62
  }, "data-test-id": dataTestId },
63
63
  React.createElement("svg", { viewBox: `0 0 ${memorized.widthSVG} ${memorized.heightSVG}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
64
- React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], {
64
+ React.createElement("circle", { className: cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {
65
65
  [styles.stroke]: !stroke,
66
66
  }), style: {
67
67
  ...(strokeColor && stroke && { stroke: strokeColor }),
68
68
  }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
69
- React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size]), style: {
69
+ React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[SIZE_TO_CLASSNAME_MAP[size]]), style: {
70
70
  ...(progressStrokeColor && { stroke: progressStrokeColor }),
71
71
  }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
72
72
  ? -memorized.strokeDashoffset
package/modern/consts.d.ts CHANGED
@@ -5,6 +5,12 @@ declare const SIZES: {
5
5
  l: number;
6
6
  xl: number;
7
7
  xxl: number;
8
+ 24: number;
9
+ 48: number;
10
+ 64: number;
11
+ 80: number;
12
+ 128: number;
13
+ 144: number;
8
14
  };
9
15
  declare const STROKE: {
10
16
  xs: number;
@@ -13,6 +19,12 @@ declare const STROKE: {
13
19
  l: number;
14
20
  xl: number;
15
21
  xxl: number;
22
+ 24: number;
23
+ 48: number;
24
+ 64: number;
25
+ 80: number;
26
+ 128: number;
27
+ 144: number;
16
28
  };
17
29
  declare const VIEW_TITLE: {
18
30
  readonly xs: "small";
@@ -21,6 +33,12 @@ declare const VIEW_TITLE: {
21
33
  readonly l: "xsmall";
22
34
  readonly xl: "medium";
23
35
  readonly xxl: "medium";
36
+ readonly 24: "small";
37
+ readonly 48: "small";
38
+ readonly 64: "small";
39
+ readonly 80: "xsmall";
40
+ readonly 128: "medium";
41
+ readonly 144: "medium";
24
42
  };
25
43
  declare const VIEW_TEXT: {
26
44
  readonly xs: "secondary-small";
@@ -29,6 +47,26 @@ declare const VIEW_TEXT: {
29
47
  readonly l: "secondary-large";
30
48
  readonly xl: "secondary-large";
31
49
  readonly xxl: "secondary-large";
50
+ readonly 24: "secondary-small";
51
+ readonly 48: "secondary-small";
52
+ readonly 64: "secondary-large";
53
+ readonly 80: "secondary-large";
54
+ readonly 128: "secondary-large";
55
+ readonly 144: "secondary-large";
32
56
  };
33
57
  declare const TYPOGRAPHY_COLOR: string[];
34
- export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };
58
+ declare const SIZE_TO_CLASSNAME_MAP: {
59
+ xs: string;
60
+ s: string;
61
+ m: string;
62
+ l: string;
63
+ xl: string;
64
+ xxl: string;
65
+ 24: string;
66
+ 48: string;
67
+ 64: string;
68
+ 80: string;
69
+ 128: string;
70
+ 144: string;
71
+ };
72
+ export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };