feat: removed variant from circular progress bar component

Author: yaswanth-deriv

src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx

@@ -1,34 +1,25 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { CircularProgressBar } from '..';
+import React from "react";
+import { render } from "@testing-library/react";
+import { CircularProgressBar } from "..";
 
-describe('CircularProgressBar Component', () => {
-    it('renders correctly with default props', () => {
-        const { container } = render(<CircularProgressBar variant="clockwise" />);
-        expect(container.querySelector('.deriv-circular-progress__bar')).toBeInTheDocument();
+describe("CircularProgressBar Component", () => {
+    it("renders correctly with default props", () => {
+        const { container } = render(<CircularProgressBar/>);
+        expect(container.querySelector(".deriv-circular-progress__bar")).toBeInTheDocument();
     });
 
-    it('renders children correctly', () => {
+    it("renders children correctly", () => {
         const { getByText } = render(
-            <CircularProgressBar variant="clockwise">
+            <CircularProgressBar>
                 <div className="circular-progress-content">Child content</div>
             </CircularProgressBar>
         );
-        expect(getByText('Child content')).toBeInTheDocument();
+        expect(getByText("Child content")).toBeInTheDocument();
     });
 
-    it('handles selection correctly for selectable variant', () => {
-        const onSelectMock = jest.fn();
-        const { container } = render(
-            <CircularProgressBar variant="selectable" onSelect={onSelectMock} />
-        );
-        const progressBar = container.querySelector('.deriv-circular-progress__bar');
-        if (progressBar) {
-            fireEvent.click(progressBar);
-            expect(onSelectMock).toHaveBeenCalled();
-        } else {
-            fail('Progress bar not found');
-        }
-
+    it("renders correctly with isClockwise prop as True", () => {
+        const { container } = render(<CircularProgressBar is_clockwise/>);
+        expect(container.querySelector(".deriv-circular-progress--clockwise")).toBeInTheDocument();
     });
+
 });

src/components/CircularProgressBar/index.tsx

@@ -1,8 +1,7 @@
 import clsx from "clsx";
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode} from "react";
 import "./CircularProgressBar.scss"
 
-type TVariant = "clockwise" | "static" | "selectable"
 type TCircularProgressProps = {
     children?: ReactNode;
     className?: string;
@@ -13,8 +12,6 @@ type TCircularProgressProps = {
     stroke?: number;
     warning_limit?: number;
     icon?: ReactNode;
-    variant?: TVariant;
-    onSelect?: () => void;
 };
 
 export const CircularProgressBar = ({
@@ -26,25 +23,14 @@ export const CircularProgressBar = ({
     radius = 22,
     stroke = 3,
     warning_limit = 50,
-    variant = "clockwise",
-    onSelect // Function to be called when circle is selected
 }: TCircularProgressProps) => {
     const normalizedRadius = radius - stroke / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - (progress / 100) * circumference;
 
-    const [selected, setSelected] = useState(false);
-
-    const handleSelect = () => {
-        setSelected(prev=>!prev);
-        if (onSelect) {
-            onSelect();
-        }
-    };
-
     return (
         <div className={clsx("deriv-circular-progress", className)}>
-            <svg height={radius * 2} width={radius * 2} onClick={variant === "selectable" ? handleSelect : undefined}>
+            <svg height={radius * 2} width={radius * 2}>
                 {children && (
                     <foreignObject x="0" y="0" width={radius * 2} height={radius * 2}>
                         <div className={clsx("deriv-circular-progress__content")}>
@@ -57,30 +43,15 @@ export const CircularProgressBar = ({
                         "deriv-circular-progress--clockwise": is_clockwise,
                         "deriv-circular-progress__bar--warning": progress <= warning_limit && progress > danger_limit,
                         "deriv-circular-progress__bar--danger": progress <= danger_limit,
-                        "deriv-circular-progress__bar--selected": selected && variant === "selectable"
                     })}
                     cx={radius}
                     cy={radius}
-                    fill={variant === "selectable" && selected ? "blue" : "transparent"}
+                    fill={"transparent"}
                     r={normalizedRadius}
                     strokeDasharray={`${circumference} ${circumference}`}
                     strokeWidth={stroke}
-                    style={variant != "clockwise" ? { strokeDashoffset: "none" } : { strokeDashoffset }}
+                    style={{ strokeDashoffset }}
                 />
-                {
-                    variant != "clockwise" && (
-                        <circle
-                            cx={radius}
-                            cy={radius}
-                            r={normalizedRadius}
-                            fill="none"
-                            stroke="#E8EEFC"
-                            strokeDasharray={`${circumference} ${circumference}`}
-                            strokeWidth={stroke}
-                            style={{ strokeDashoffset: circumference - strokeDashoffset }}
-                        />
-                    )
-                }
             </svg>
         </div>
     );

stories/CircularProgressBar.stories.tsx

@@ -14,12 +14,16 @@ const meta = {
         stroke: 3,
         danger_limit: 20,
         warning_limit: 50,
-        variant:"clockwise"
+        is_clockwise:false
     },
     argTypes: {
         progress: {
             control: { type: "range", min: 0, max: 100, step: 1 },
         },
+        is_clockwise: {
+            options: ["true", "false"],
+            control: { type: "boolean" },
+        }
     },
 } as Meta<typeof CircularProgressBar>;
 export default meta;
@@ -30,19 +34,6 @@ export const DefaultClockWise: Story = {
         progress: 50,
     }
 }
-export const StaticProgressBar:Story = {
-    args:{
-        progress: 50,
-        variant: 'static',
-      }
-}
-
-export const SelectableProgressBar:Story = {
-    args:{
-        progress: 30,
-        variant: 'selectable',
-      }
-}
 
 export const CustomRadiusAndStrokeClockwise: Story = {
     args: {
@@ -59,17 +50,9 @@ export const ClockwiseProgress: Story = {
     }
 }
 
-export const WithIconSelectable: Story = {
-    args: {
-        progress: 80,
-        children: <span>🔄</span>,
-        variant:"selectable"
-    }
-}
-
 export const WarningLimitClockWise = {
     args: {
-        progress: 40,
+        progress: 30,
         warning_limit: 30,
     }
 }