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

package/modern/consts.js

@@ -5,6 +5,12 @@ const SIZES = {
     l: 80,
     xl: 128,
     xxl: 144,
+    24: 24,
+    48: 48,
+    64: 64,
+    80: 80,
+    128: 128,
+    144: 144,
 };
 const STROKE = {
     xs: 4,
@@ -13,6 +19,12 @@ const STROKE = {
     l: 8,
     xl: 10,
     xxl: 12,
+    24: 4,
+    48: 4,
+    64: 6,
+    80: 8,
+    128: 10,
+    144: 12,
 };
 const VIEW_TITLE = {
     xs: 'small',
@@ -21,6 +33,12 @@ const VIEW_TITLE = {
     l: 'xsmall',
     xl: 'medium',
     xxl: 'medium',
+    24: 'small',
+    48: 'small',
+    64: 'small',
+    80: 'xsmall',
+    128: 'medium',
+    144: 'medium',
 };
 const VIEW_TEXT = {
     xs: 'secondary-small',
@@ -29,7 +47,27 @@ const VIEW_TEXT = {
     l: 'secondary-large',
     xl: 'secondary-large',
     xxl: 'secondary-large',
+    24: 'secondary-small',
+    48: 'secondary-small',
+    64: 'secondary-large',
+    80: 'secondary-large',
+    128: 'secondary-large',
+    144: 'secondary-large',
 };
 const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
+const SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-24',
+    s: 'size-48',
+    m: 'size-64',
+    l: 'size-80',
+    xl: 'size-128',
+    xxl: 'size-144',
+    24: 'size-24',
+    48: 'size-48',
+    64: 'size-64',
+    80: 'size-80',
+    128: 'size-128',
+    144: 'size-144',
+};
 
-export { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
+export { SIZES, SIZE_TO_CLASSNAME_MAP, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };

package/modern/index.css

@@ -1,5 +1,5 @@
-/* hash: 1tjsl */
-:root {
+/* hash: 1m7tb */
+: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 */
 } /* deprecated */ :root {
     --color-light-neutral-1500: #0e0e0e;
     --color-light-neutral-1500-inverted: #fff;
@@ -37,135 +37,135 @@
     /* theme */
     --circular-progress-bar-font-family: var(--font-family-system);
     --circular-progress-bar-font-weight: 600;
-} .circular-progress-bar__component_if9gi {
+} .circular-progress-bar__component_o79lq {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: var(--border-radius-pill)
-} .circular-progress-bar__component_if9gi.circular-progress-bar__bg-positive_if9gi {
+} .circular-progress-bar__component_o79lq.circular-progress-bar__bg-positive_o79lq {
         background: var(--circular-progress-bar-positive-color);
-    } .circular-progress-bar__component_if9gi.circular-progress-bar__bg-negative_if9gi {
+    } .circular-progress-bar__component_o79lq.circular-progress-bar__bg-negative_o79lq {
         background: var(--circular-progress-bar-negative-color);
-    } .circular-progress-bar__svg_if9gi {
+    } .circular-progress-bar__svg_o79lq {
     display: block;
     width: 100%;
-} .circular-progress-bar__title_if9gi,
-.circular-progress-bar__subtitle_if9gi {
+} .circular-progress-bar__title_o79lq,
+.circular-progress-bar__subtitle_o79lq {
     overflow: hidden;
     word-break: break-word;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0 6px;
-} .circular-progress-bar__subtitle_if9gi {
+} .circular-progress-bar__subtitle_o79lq {
     max-height: 40px;
-} .circular-progress-bar__labelWrapper_if9gi {
+} .circular-progress-bar__labelWrapper_o79lq {
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     transform: translate(-50%, -50%)
-} .circular-progress-bar__labelWrapper_if9gi.circular-progress-bar__label_if9gi {
+} .circular-progress-bar__labelWrapper_o79lq.circular-progress-bar__label_o79lq {
         display: flex;
         align-items: center;
         justify-content: center;
-    } .circular-progress-bar__typography_if9gi {
+    } .circular-progress-bar__typography_o79lq {
     font-feature-settings: 'ss01';
     font-weight: var(--circular-progress-bar-font-weight);
     font-family: var(--circular-progress-bar-font-family);
-} .circular-progress-bar__xxl_if9gi {
+} .circular-progress-bar__size-144_o79lq {
     width: 144px;
     height: 144px
-} .circular-progress-bar__xxl_if9gi .circular-progress-bar__labelWrapper_if9gi {
+} .circular-progress-bar__size-144_o79lq .circular-progress-bar__labelWrapper_o79lq {
         max-width: 128px;
-    } .circular-progress-bar__xxl_if9gi .circular-progress-bar__title_if9gi {
+    } .circular-progress-bar__size-144_o79lq .circular-progress-bar__title_o79lq {
         max-height: 32px;
-    } .circular-progress-bar__xl_if9gi {
+    } .circular-progress-bar__size-128_o79lq {
     width: 128px;
     height: 128px
-} .circular-progress-bar__xl_if9gi .circular-progress-bar__labelWrapper_if9gi {
+} .circular-progress-bar__size-128_o79lq .circular-progress-bar__labelWrapper_o79lq {
         max-width: 108px;
-    } .circular-progress-bar__xl_if9gi .circular-progress-bar__title_if9gi {
+    } .circular-progress-bar__size-128_o79lq .circular-progress-bar__title_o79lq {
         max-height: 32px;
-    } .circular-progress-bar__l_if9gi {
+    } .circular-progress-bar__size-80_o79lq {
     width: 80px;
     height: 80px
-} .circular-progress-bar__l_if9gi .circular-progress-bar__labelWrapper_if9gi {
+} .circular-progress-bar__size-80_o79lq .circular-progress-bar__labelWrapper_o79lq {
         max-width: 64px;
-    } .circular-progress-bar__l_if9gi .circular-progress-bar__title_if9gi {
+    } .circular-progress-bar__size-80_o79lq .circular-progress-bar__title_o79lq {
         max-height: 24px;
-    } .circular-progress-bar__m_if9gi {
+    } .circular-progress-bar__size-64_o79lq {
     width: 64px;
     height: 64px
-} .circular-progress-bar__m_if9gi .circular-progress-bar__labelWrapper_if9gi {
+} .circular-progress-bar__size-64_o79lq .circular-progress-bar__labelWrapper_o79lq {
         max-width: 48px;
-    } .circular-progress-bar__m_if9gi .circular-progress-bar__title_if9gi {
+    } .circular-progress-bar__size-64_o79lq .circular-progress-bar__title_o79lq {
         max-height: 16px;
         margin: 0;
-    } .circular-progress-bar__s_if9gi {
+    } .circular-progress-bar__size-48_o79lq {
     width: 48px;
     height: 48px
-} .circular-progress-bar__s_if9gi .circular-progress-bar__labelWrapper_if9gi {
+} .circular-progress-bar__size-48_o79lq .circular-progress-bar__labelWrapper_o79lq {
         max-width: 40px;
-    } .circular-progress-bar__s_if9gi .circular-progress-bar__title_if9gi {
+    } .circular-progress-bar__size-48_o79lq .circular-progress-bar__title_o79lq {
         max-height: 16px;
         margin: 0;
-    } .circular-progress-bar__xs_if9gi {
+    } .circular-progress-bar__size-24_o79lq {
     width: 24px;
     height: 24px
-} .circular-progress-bar__xs_if9gi .circular-progress-bar__labelWrapper_if9gi {
+} .circular-progress-bar__size-24_o79lq .circular-progress-bar__labelWrapper_o79lq {
         max-width: 24px;
-    } .circular-progress-bar__backgroundCircle_if9gi,
-.circular-progress-bar__progressCircle_if9gi {
+    } .circular-progress-bar__backgroundCircle_o79lq,
+.circular-progress-bar__progressCircle_o79lq {
     width: 100%;
     height: 100%;
     fill: transparent;
-} .circular-progress-bar__positive_if9gi {
+} .circular-progress-bar__positive_o79lq {
     stroke: var(--circular-progress-bar-positive-color);
-} .circular-progress-bar__negative_if9gi {
+} .circular-progress-bar__negative_o79lq {
     stroke: var(--circular-progress-bar-negative-color);
-} .circular-progress-bar__backgroundCircle_if9gi {
+} .circular-progress-bar__backgroundCircle_o79lq {
     stroke: var(--circular-progress-bar-stroke-color)
-} .circular-progress-bar__backgroundCircle_if9gi.circular-progress-bar__stroke_if9gi {
+} .circular-progress-bar__backgroundCircle_o79lq.circular-progress-bar__stroke_o79lq {
         stroke: transparent;
-    } .circular-progress-bar__progressCircle_if9gi {
+    } .circular-progress-bar__progressCircle_o79lq {
     stroke-linecap: round;
-} .circular-progress-bar__iconWrapper_if9gi {
+} .circular-progress-bar__iconWrapper_o79lq {
     display: flex;
     align-items: center;
     justify-content: center
-} .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xxl_if9gi {
+} .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-144_o79lq {
         max-width: 64px;
         max-height: 64px;
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xl_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-128_o79lq {
         max-width: 64px;
         max-height: 64px;
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__l_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-80_o79lq {
         max-width: 48px;
         max-height: 48px;
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__m_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-64_o79lq {
         max-width: 36px;
         max-height: 36px;
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__s_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-48_o79lq {
         max-width: 24px;
         max-height: 24px;
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__xs_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__size-24_o79lq {
         max-width: 16px;
         max-height: 16px;
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-tertiary_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-tertiary_o79lq {
         color: var(--color-light-neutral-500);
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-positive_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-positive_o79lq {
         color: var(--color-light-status-positive);
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-negative_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-negative_o79lq {
         color: var(--color-light-status-negative);
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-primary-inverted_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-primary-inverted_o79lq {
         color: var(--color-light-neutral-1500-inverted);
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-primary_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-primary_o79lq {
         color: var(--color-light-neutral-1500);
-    } .circular-progress-bar__iconWrapper_if9gi.circular-progress-bar__icon-secondary_if9gi {
+    } .circular-progress-bar__iconWrapper_o79lq.circular-progress-bar__icon-secondary_o79lq {
         color: var(--color-light-neutral-700);
-    } .circular-progress-bar__icon_if9gi {
+    } .circular-progress-bar__icon_o79lq {
     width: 100%;
     height: 100%;
 }

package/modern/index.js

@@ -1,5 +1 @@
 export { CircularProgressBar } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/core-components-typography/modern';
-import './consts.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-circular-progress-bar",
-    "version": "3.4.2",
+    "version": "3.5.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -11,7 +11,7 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-typography": "^4.4.0",
+        "@alfalab/core-components-typography": "^4.5.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },

package/src/Component.tsx

@@ -3,7 +3,14 @@ import cn from 'classnames';
 
 import { Typography } from '@alfalab/core-components-typography';
 
-import { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE } from './consts';
+import {
+    SIZE_TO_CLASSNAME_MAP,
+    SIZES,
+    STROKE,
+    TYPOGRAPHY_COLOR,
+    VIEW_TEXT,
+    VIEW_TITLE,
+} from './consts';
 
 import styles from './index.module.css';
 
@@ -52,8 +59,9 @@ export type CircularProgressBarProps = {
 
     /**
      * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
+     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
      */
-    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
 
     /**
      * Наличие желоба
@@ -134,7 +142,7 @@ export type CircularProgressBarProps = {
 export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
     value,
     view = 'positive',
-    size = 'm',
+    size = 64,
     className,
     dataTestId,
     title = value ? value.toString() : '0',
@@ -239,7 +247,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
         <span
             className={cn(
                 styles.iconWrapper,
-                styles[size],
+                styles[SIZE_TO_CLASSNAME_MAP[size]],
                 styles.tertiary,
                 styles[`icon-${contentColor}`],
                 {
@@ -263,7 +271,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
 
     return (
         <div
-            className={cn(styles.component, styles[size], className, {
+            className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {
                 [styles[`bg-${view}`]]: fillComplete && isComplete,
             })}
             style={{
@@ -278,7 +286,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
                 xmlns='http://www.w3.org/2000/svg'
             >
                 <circle
-                    className={cn(styles.backgroundCircle, styles[size], {
+                    className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {
                         [styles.stroke]: !stroke,
                     })}
                     style={{
@@ -290,7 +298,11 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
                     strokeWidth={STROKE[size]}
                 />
                 <circle
-                    className={cn(styles.progressCircle, styles[view], styles[size])}
+                    className={cn(
+                        styles.progressCircle,
+                        styles[view],
+                        styles[SIZE_TO_CLASSNAME_MAP[size]],
+                    )}
                     style={{
                         ...(progressStrokeColor && { stroke: progressStrokeColor }),
                     }}

package/src/consts.ts

@@ -5,6 +5,12 @@ export const SIZES = {
     l: 80,
     xl: 128,
     xxl: 144,
+    24: 24,
+    48: 48,
+    64: 64,
+    80: 80,
+    128: 128,
+    144: 144,
 };
 
 export const STROKE = {
@@ -14,6 +20,12 @@ export const STROKE = {
     l: 8,
     xl: 10,
     xxl: 12,
+    24: 4,
+    48: 4,
+    64: 6,
+    80: 8,
+    128: 10,
+    144: 12,
 };
 
 export const VIEW_TITLE = {
@@ -23,6 +35,12 @@ export const VIEW_TITLE = {
     l: 'xsmall',
     xl: 'medium',
     xxl: 'medium',
+    24: 'small',
+    48: 'small',
+    64: 'small',
+    80: 'xsmall',
+    128: 'medium',
+    144: 'medium',
 } as const;
 
 export const VIEW_TEXT = {
@@ -32,6 +50,27 @@ export const VIEW_TEXT = {
     l: 'secondary-large',
     xl: 'secondary-large',
     xxl: 'secondary-large',
+    24: 'secondary-small',
+    48: 'secondary-small',
+    64: 'secondary-large',
+    80: 'secondary-large',
+    128: 'secondary-large',
+    144: 'secondary-large',
 } as const;
 
 export const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
+
+export const SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-24',
+    s: 'size-48',
+    m: 'size-64',
+    l: 'size-80',
+    xl: 'size-128',
+    xxl: 'size-144',
+    24: 'size-24',
+    48: 'size-48',
+    64: 'size-64',
+    80: 'size-80',
+    128: 'size-128',
+    144: 'size-144',
+};

package/src/index.module.css

@@ -70,7 +70,7 @@
     font-family: var(--circular-progress-bar-font-family);
 }
 
-.xxl {
+.size-144 {
     width: 144px;
     height: 144px;
 
@@ -83,7 +83,7 @@
     }
 }
 
-.xl {
+.size-128 {
     width: 128px;
     height: 128px;
 
@@ -96,7 +96,7 @@
     }
 }
 
-.l {
+.size-80 {
     width: 80px;
     height: 80px;
 
@@ -109,7 +109,7 @@
     }
 }
 
-.m {
+.size-64 {
     width: 64px;
     height: 64px;
 
@@ -123,7 +123,7 @@
     }
 }
 
-.s {
+.size-48 {
     width: 48px;
     height: 48px;
 
@@ -137,7 +137,7 @@
     }
 }
 
-.xs {
+.size-24 {
     width: 24px;
     height: 24px;
 
@@ -178,32 +178,32 @@
     align-items: center;
     justify-content: center;
 
-    &.xxl {
+    &.size-144 {
         max-width: 64px;
         max-height: 64px;
     }
 
-    &.xl {
+    &.size-128 {
         max-width: 64px;
         max-height: 64px;
     }
 
-    &.l {
+    &.size-80 {
         max-width: 48px;
         max-height: 48px;
     }
 
-    &.m {
+    &.size-64 {
         max-width: 36px;
         max-height: 36px;
     }
 
-    &.s {
+    &.size-48 {
         max-width: 24px;
         max-height: 24px;
     }
 
-    &.xs {
+    &.size-24 {
         max-width: 16px;
         max-height: 16px;
     }