@alfalab/core-components-circular-progress-bar 3.4.3 → 3.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) 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.module.css +26 -26
  10. package/esm/Component.d.ts +2 -1
  11. package/esm/Component.js +7 -7
  12. package/esm/consts.d.ts +39 -1
  13. package/esm/consts.js +39 -1
  14. package/esm/index.css +52 -52
  15. package/index.css +52 -52
  16. package/modern/Component.d.ts +2 -1
  17. package/modern/Component.js +7 -7
  18. package/modern/consts.d.ts +39 -1
  19. package/modern/consts.js +39 -1
  20. package/modern/index.css +52 -52
  21. package/package.json +2 -2
  22. package/src/Component.tsx +19 -7
  23. package/src/consts.ts +39 -0
  24. package/src/index.module.css +12 -12
package/modern/consts.js CHANGED
@@ -5,6 +5,12 @@ const 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
  const STROKE = {
10
16
  xs: 4,
@@ -13,6 +19,12 @@ const 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
  const VIEW_TITLE = {
18
30
  xs: 'small',
@@ -21,6 +33,12 @@ const 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
  const VIEW_TEXT = {
26
44
  xs: 'secondary-small',
@@ -29,7 +47,27 @@ const 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
  const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
58
+ const 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/modern/index.css CHANGED
@@ -1,12 +1,12 @@
1
- /* hash: 30xqn */
2
- :root {
1
+ /* hash: 1dkhi */
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
- --color-light-neutral-1500: #0e0e0e;
4
+ --color-light-neutral-1500: #121213;
5
5
  --color-light-neutral-1500-inverted: #fff;
6
6
  --color-light-neutral-500: #babbc2;
7
7
  --color-light-neutral-700: #898991;
8
8
  --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
9
- --color-light-status-negative: #ff5431;
9
+ --color-light-status-negative: #ff4837;
10
10
  --color-light-status-positive: #0cc44d; /* 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 */
11
11
  } :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 */
12
12
  } :root {
@@ -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_1ckn0 {
40
+ } .circular-progress-bar__component_ath2v {
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_1ckn0.circular-progress-bar__bg-positive_1ckn0 {
46
+ } .circular-progress-bar__component_ath2v.circular-progress-bar__bg-positive_ath2v {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_1ckn0.circular-progress-bar__bg-negative_1ckn0 {
48
+ } .circular-progress-bar__component_ath2v.circular-progress-bar__bg-negative_ath2v {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_1ckn0 {
50
+ } .circular-progress-bar__svg_ath2v {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_1ckn0,
54
- .circular-progress-bar__subtitle_1ckn0 {
53
+ } .circular-progress-bar__title_ath2v,
54
+ .circular-progress-bar__subtitle_ath2v {
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_1ckn0 {
60
+ } .circular-progress-bar__subtitle_ath2v {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_1ckn0 {
62
+ } .circular-progress-bar__labelWrapper_ath2v {
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_1ckn0.circular-progress-bar__label_1ckn0 {
69
+ } .circular-progress-bar__labelWrapper_ath2v.circular-progress-bar__label_ath2v {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_1ckn0 {
73
+ } .circular-progress-bar__typography_ath2v {
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_1ckn0 {
77
+ } .circular-progress-bar__size-144_ath2v {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_1ckn0 .circular-progress-bar__labelWrapper_1ckn0 {
80
+ } .circular-progress-bar__size-144_ath2v .circular-progress-bar__labelWrapper_ath2v {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_1ckn0 .circular-progress-bar__title_1ckn0 {
82
+ } .circular-progress-bar__size-144_ath2v .circular-progress-bar__title_ath2v {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_1ckn0 {
84
+ } .circular-progress-bar__size-128_ath2v {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_1ckn0 .circular-progress-bar__labelWrapper_1ckn0 {
87
+ } .circular-progress-bar__size-128_ath2v .circular-progress-bar__labelWrapper_ath2v {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_1ckn0 .circular-progress-bar__title_1ckn0 {
89
+ } .circular-progress-bar__size-128_ath2v .circular-progress-bar__title_ath2v {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_1ckn0 {
91
+ } .circular-progress-bar__size-80_ath2v {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_1ckn0 .circular-progress-bar__labelWrapper_1ckn0 {
94
+ } .circular-progress-bar__size-80_ath2v .circular-progress-bar__labelWrapper_ath2v {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_1ckn0 .circular-progress-bar__title_1ckn0 {
96
+ } .circular-progress-bar__size-80_ath2v .circular-progress-bar__title_ath2v {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_1ckn0 {
98
+ } .circular-progress-bar__size-64_ath2v {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_1ckn0 .circular-progress-bar__labelWrapper_1ckn0 {
101
+ } .circular-progress-bar__size-64_ath2v .circular-progress-bar__labelWrapper_ath2v {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_1ckn0 .circular-progress-bar__title_1ckn0 {
103
+ } .circular-progress-bar__size-64_ath2v .circular-progress-bar__title_ath2v {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_1ckn0 {
106
+ } .circular-progress-bar__size-48_ath2v {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_1ckn0 .circular-progress-bar__labelWrapper_1ckn0 {
109
+ } .circular-progress-bar__size-48_ath2v .circular-progress-bar__labelWrapper_ath2v {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_1ckn0 .circular-progress-bar__title_1ckn0 {
111
+ } .circular-progress-bar__size-48_ath2v .circular-progress-bar__title_ath2v {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_1ckn0 {
114
+ } .circular-progress-bar__size-24_ath2v {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_1ckn0 .circular-progress-bar__labelWrapper_1ckn0 {
117
+ } .circular-progress-bar__size-24_ath2v .circular-progress-bar__labelWrapper_ath2v {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_1ckn0,
120
- .circular-progress-bar__progressCircle_1ckn0 {
119
+ } .circular-progress-bar__backgroundCircle_ath2v,
120
+ .circular-progress-bar__progressCircle_ath2v {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_1ckn0 {
124
+ } .circular-progress-bar__positive_ath2v {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_1ckn0 {
126
+ } .circular-progress-bar__negative_ath2v {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_1ckn0 {
128
+ } .circular-progress-bar__backgroundCircle_ath2v {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_1ckn0.circular-progress-bar__stroke_1ckn0 {
130
+ } .circular-progress-bar__backgroundCircle_ath2v.circular-progress-bar__stroke_ath2v {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_1ckn0 {
132
+ } .circular-progress-bar__progressCircle_ath2v {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_1ckn0 {
134
+ } .circular-progress-bar__iconWrapper_ath2v {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__xxl_1ckn0 {
138
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__size-144_ath2v {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__xl_1ckn0 {
141
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__size-128_ath2v {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__l_1ckn0 {
144
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__size-80_ath2v {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__m_1ckn0 {
147
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__size-64_ath2v {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__s_1ckn0 {
150
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__size-48_ath2v {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__xs_1ckn0 {
153
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__size-24_ath2v {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__icon-tertiary_1ckn0 {
156
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__icon-tertiary_ath2v {
157
157
  color: var(--color-light-neutral-500);
158
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__icon-positive_1ckn0 {
158
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__icon-positive_ath2v {
159
159
  color: var(--color-light-status-positive);
160
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__icon-negative_1ckn0 {
160
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__icon-negative_ath2v {
161
161
  color: var(--color-light-status-negative);
162
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__icon-primary-inverted_1ckn0 {
162
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__icon-primary-inverted_ath2v {
163
163
  color: var(--color-light-neutral-1500-inverted);
164
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__icon-primary_1ckn0 {
164
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__icon-primary_ath2v {
165
165
  color: var(--color-light-neutral-1500);
166
- } .circular-progress-bar__iconWrapper_1ckn0.circular-progress-bar__icon-secondary_1ckn0 {
166
+ } .circular-progress-bar__iconWrapper_ath2v.circular-progress-bar__icon-secondary_ath2v {
167
167
  color: var(--color-light-neutral-700);
168
- } .circular-progress-bar__icon_1ckn0 {
168
+ } .circular-progress-bar__icon_ath2v {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.4.3",
3
+ "version": "3.5.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -11,7 +11,7 @@
11
11
  "directory": "dist"
12
12
  },
13
13
  "dependencies": {
14
- "@alfalab/core-components-typography": "^4.5.0",
14
+ "@alfalab/core-components-typography": "^4.5.1",
15
15
  "classnames": "^2.3.1",
16
16
  "tslib": "^2.4.0"
17
17
  },
package/src/Component.tsx CHANGED
@@ -3,7 +3,14 @@ import cn from 'classnames';
3
3
 
4
4
  import { Typography } from '@alfalab/core-components-typography';
5
5
 
6
- import { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE } from './consts';
6
+ import {
7
+ SIZE_TO_CLASSNAME_MAP,
8
+ SIZES,
9
+ STROKE,
10
+ TYPOGRAPHY_COLOR,
11
+ VIEW_TEXT,
12
+ VIEW_TITLE,
13
+ } from './consts';
7
14
 
8
15
  import styles from './index.module.css';
9
16
 
@@ -52,8 +59,9 @@ export type CircularProgressBarProps = {
52
59
 
53
60
  /**
54
61
  * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
62
+ * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
55
63
  */
56
- size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
64
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
57
65
 
58
66
  /**
59
67
  * Наличие желоба
@@ -134,7 +142,7 @@ export type CircularProgressBarProps = {
134
142
  export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
135
143
  value,
136
144
  view = 'positive',
137
- size = 'm',
145
+ size = 64,
138
146
  className,
139
147
  dataTestId,
140
148
  title = value ? value.toString() : '0',
@@ -239,7 +247,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
239
247
  <span
240
248
  className={cn(
241
249
  styles.iconWrapper,
242
- styles[size],
250
+ styles[SIZE_TO_CLASSNAME_MAP[size]],
243
251
  styles.tertiary,
244
252
  styles[`icon-${contentColor}`],
245
253
  {
@@ -263,7 +271,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
263
271
 
264
272
  return (
265
273
  <div
266
- className={cn(styles.component, styles[size], className, {
274
+ className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {
267
275
  [styles[`bg-${view}`]]: fillComplete && isComplete,
268
276
  })}
269
277
  style={{
@@ -278,7 +286,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
278
286
  xmlns='http://www.w3.org/2000/svg'
279
287
  >
280
288
  <circle
281
- className={cn(styles.backgroundCircle, styles[size], {
289
+ className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {
282
290
  [styles.stroke]: !stroke,
283
291
  })}
284
292
  style={{
@@ -290,7 +298,11 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
290
298
  strokeWidth={STROKE[size]}
291
299
  />
292
300
  <circle
293
- className={cn(styles.progressCircle, styles[view], styles[size])}
301
+ className={cn(
302
+ styles.progressCircle,
303
+ styles[view],
304
+ styles[SIZE_TO_CLASSNAME_MAP[size]],
305
+ )}
294
306
  style={{
295
307
  ...(progressStrokeColor && { stroke: progressStrokeColor }),
296
308
  }}
package/src/consts.ts CHANGED
@@ -5,6 +5,12 @@ export const 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
 
10
16
  export const STROKE = {
@@ -14,6 +20,12 @@ export const STROKE = {
14
20
  l: 8,
15
21
  xl: 10,
16
22
  xxl: 12,
23
+ 24: 4,
24
+ 48: 4,
25
+ 64: 6,
26
+ 80: 8,
27
+ 128: 10,
28
+ 144: 12,
17
29
  };
18
30
 
19
31
  export const VIEW_TITLE = {
@@ -23,6 +35,12 @@ export const VIEW_TITLE = {
23
35
  l: 'xsmall',
24
36
  xl: 'medium',
25
37
  xxl: 'medium',
38
+ 24: 'small',
39
+ 48: 'small',
40
+ 64: 'small',
41
+ 80: 'xsmall',
42
+ 128: 'medium',
43
+ 144: 'medium',
26
44
  } as const;
27
45
 
28
46
  export const VIEW_TEXT = {
@@ -32,6 +50,27 @@ export const VIEW_TEXT = {
32
50
  l: 'secondary-large',
33
51
  xl: 'secondary-large',
34
52
  xxl: 'secondary-large',
53
+ 24: 'secondary-small',
54
+ 48: 'secondary-small',
55
+ 64: 'secondary-large',
56
+ 80: 'secondary-large',
57
+ 128: 'secondary-large',
58
+ 144: 'secondary-large',
35
59
  } as const;
36
60
 
37
61
  export const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
62
+
63
+ export const SIZE_TO_CLASSNAME_MAP = {
64
+ xs: 'size-24',
65
+ s: 'size-48',
66
+ m: 'size-64',
67
+ l: 'size-80',
68
+ xl: 'size-128',
69
+ xxl: 'size-144',
70
+ 24: 'size-24',
71
+ 48: 'size-48',
72
+ 64: 'size-64',
73
+ 80: 'size-80',
74
+ 128: 'size-128',
75
+ 144: 'size-144',
76
+ };
package/src/index.module.css CHANGED
@@ -70,7 +70,7 @@
70
70
  font-family: var(--circular-progress-bar-font-family);
71
71
  }
72
72
 
73
- .xxl {
73
+ .size-144 {
74
74
  width: 144px;
75
75
  height: 144px;
76
76
 
@@ -83,7 +83,7 @@
83
83
  }
84
84
  }
85
85
 
86
- .xl {
86
+ .size-128 {
87
87
  width: 128px;
88
88
  height: 128px;
89
89
 
@@ -96,7 +96,7 @@
96
96
  }
97
97
  }
98
98
 
99
- .l {
99
+ .size-80 {
100
100
  width: 80px;
101
101
  height: 80px;
102
102
 
@@ -109,7 +109,7 @@
109
109
  }
110
110
  }
111
111
 
112
- .m {
112
+ .size-64 {
113
113
  width: 64px;
114
114
  height: 64px;
115
115
 
@@ -123,7 +123,7 @@
123
123
  }
124
124
  }
125
125
 
126
- .s {
126
+ .size-48 {
127
127
  width: 48px;
128
128
  height: 48px;
129
129
 
@@ -137,7 +137,7 @@
137
137
  }
138
138
  }
139
139
 
140
- .xs {
140
+ .size-24 {
141
141
  width: 24px;
142
142
  height: 24px;
143
143
 
@@ -178,32 +178,32 @@
178
178
  align-items: center;
179
179
  justify-content: center;
180
180
 
181
- &.xxl {
181
+ &.size-144 {
182
182
  max-width: 64px;
183
183
  max-height: 64px;
184
184
  }
185
185
 
186
- &.xl {
186
+ &.size-128 {
187
187
  max-width: 64px;
188
188
  max-height: 64px;
189
189
  }
190
190
 
191
- &.l {
191
+ &.size-80 {
192
192
  max-width: 48px;
193
193
  max-height: 48px;
194
194
  }
195
195
 
196
- &.m {
196
+ &.size-64 {
197
197
  max-width: 36px;
198
198
  max-height: 36px;
199
199
  }
200
200
 
201
- &.s {
201
+ &.size-48 {
202
202
  max-width: 24px;
203
203
  max-height: 24px;
204
204
  }
205
205
 
206
- &.xs {
206
+ &.size-24 {
207
207
  max-width: 16px;
208
208
  max-height: 16px;
209
209
  }