feat(CircleProgressBar): added xs | s sizes

taskany-inc · Aug 14, 2024 · 18c660a · 18c660a
1 parent 8f1aba5
commit 18c660a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 40 deletions.
diff --git a/src/harmony/CircleProgressBar/CircleProgressBar.module.css b/src/harmony/CircleProgressBar/CircleProgressBar.module.css
@@ -1,6 +1,5 @@
 .ProgressBar {
     position: relative;
-    display: inline-flex;
 }
 
 .Circle_overlay {
@@ -25,10 +24,14 @@
     color: var(--primary-500);
 }
 
-.Text_size_m {
+.Text_size_s {
     font-size: var(--font-size-xxs);
 }
 
-.Text_size_l {
+.Text_size_m {
     font-size: var(--font-size-xs);
 }
+
+.Text_size_l {
+    font-size: var(--font-size-s);
+}
diff --git a/src/harmony/CircleProgressBar/CircleProgressBar.stories.tsx b/src/harmony/CircleProgressBar/CircleProgressBar.stories.tsx
@@ -13,9 +13,11 @@ export default meta;
 export const Circles = () => {
     return (
         <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
-            <CircleProgressBar value={0} />
-            <CircleProgressBar value={60} />
-            <CircleProgressBar value={100} size="l" />
+            <CircleProgressBar size="xxs" value={30} />
+            <CircleProgressBar size="xs" value={30} />
+            <CircleProgressBar size="s" value={0} />
+            <CircleProgressBar size="m" value={60} />
+            <CircleProgressBar size="l" value={100} />
         </div>
     );
 };
diff --git a/src/harmony/CircleProgressBar/CircleProgressBar.tsx b/src/harmony/CircleProgressBar/CircleProgressBar.tsx
@@ -1,20 +1,41 @@
 import React from 'react';
 import cn from 'classnames';
+import { BaseIcon } from '@taskany/icons';
+
+import { nullable } from '../../utils';
 
 import s from './CircleProgressBar.module.css';
 
+const sizeMap = {
+    xxs: 12,
+    xs: 14,
+    s: 15,
+    m: 32,
+    l: 48,
+};
+
 interface CircleProgressBarProps extends React.HTMLAttributes<HTMLSpanElement> {
     value: number;
-    size?: 'm' | 'l';
+    size?: keyof typeof sizeMap;
+    hideValue?: boolean;
     className?: string;
 }
 
-const sizeMap = {
-    m: 24,
-    l: 32,
+const allowedTextSizes: Record<keyof typeof sizeMap, string | null> = {
+    s: null,
+    m: s.Text_size_m,
+    l: s.Text_size_l,
+    xs: null,
+    xxs: null,
 };
 
-export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({ value, size = 'm', className, ...props }) => {
+export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({
+    value,
+    size = 'm',
+    hideValue,
+    className,
+    ...props
+}) => {
     const diameter = sizeMap[size];
     const strokeWidth = 3;
     const radius = diameter / 2;
@@ -24,34 +45,47 @@ export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({ value, siz
     const offset = circumReference - (value / 100) * circumReference;
 
     return (
-        <span className={cn(s.ProgressBar, className)} {...props}>
-            <span className={cn(s.Text, size === 'l' ? s.Text_size_l : s.Text_size_m)}>{value}</span>
-            <svg
-                viewBox={`${-strokeWidth / 2} ${-strokeWidth / 2} ${diameter + strokeWidth} ${diameter + strokeWidth}`}
-                width={diameter}
-                height={diameter}
-            >
-                <circle
-                    className={s.Circle_background}
-                    cx={radius}
-                    cy={radius}
-                    r={radius}
-                    fill="none"
-                    strokeWidth={strokeWidth}
-                />
-                <circle
-                    className={s.Circle_overlay}
-                    cx={radius}
-                    cy={radius}
-                    r={radius}
-                    fill="none"
-                    strokeWidth={strokeWidth}
-                    strokeDasharray={circumReference}
-                    strokeDashoffset={offset}
-                    strokeLinecap="round"
-                    transform={`rotate(-90 ${radius} ${radius})`}
-                />
-            </svg>
-        </span>
+        <BaseIcon
+            className={cn(s.ProgressBar, className)}
+            size={size}
+            value={(svgProps) => (
+                <>
+                    {nullable(allowedTextSizes[size] || hideValue, () => (
+                        <span className={cn(s.Text, allowedTextSizes[size])}>{value}</span>
+                    ))}
+
+                    <svg
+                        {...svgProps}
+                        viewBox={`${-strokeWidth / 2} ${-strokeWidth / 2} ${diameter + strokeWidth} ${
+                            diameter + strokeWidth
+                        }`}
+                        width={diameter}
+                        height={diameter}
+                    >
+                        <circle
+                            className={s.Circle_background}
+                            cx={radius}
+                            cy={radius}
+                            r={radius}
+                            fill="none"
+                            strokeWidth={strokeWidth}
+                        />
+                        <circle
+                            className={s.Circle_overlay}
+                            cx={radius}
+                            cy={radius}
+                            r={radius}
+                            fill="none"
+                            strokeWidth={strokeWidth}
+                            strokeDasharray={circumReference}
+                            strokeDashoffset={offset}
+                            strokeLinecap="round"
+                            transform={`rotate(-90 ${radius} ${radius})`}
+                        />
+                    </svg>
+                </>
+            )}
+            {...props}
+        />
     );
 };