[FEQ]Yaswanth/FEQ-1858_Implemented Circular ProgressBar component

src/components/CircularProgressBar/CircularProgressBar.scss

@@ -0,0 +1,42 @@
+.deriv-circular-progress {
+    position: relative;
+    line-height: 0;
+    width: fit-content;
+
+    &__content {
+        position: absolute;
+        inset:0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__bar {
+        transform: scaleX(-1) rotate(-90deg);
+        transform-origin: 50% 50%;
+        transition: stroke-dashoffset 1s;
+        stroke: var(--du-brand-secondary, #85acb0);
+
+        &--warning {
+            stroke: var(--du-status-warning, #ffad3a);
+        }
+
+        &--danger {
+            stroke: var(--du-status-danger, #ec3f3f)
+        }
+    }
+
+    &--clockwise {
+        transform: rotate(-90deg);
+    }
+
+    &__icon {
+        position: absolute;
+        width: 1.6rem;
+        height: 100%;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, fireEvent } 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();
+    });
+
+    it('renders children correctly', () => {
+        const { getByText } = render(
+            <CircularProgressBar variant="clockwise">
+                <div className="circular-progress-content">Child content</div>
+            </CircularProgressBar>
+        );
+        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');
+        }
+
+    });
+});

src/components/CircularProgressBar/index.tsx

@@ -0,0 +1,87 @@
+import clsx from "clsx";
+import React, { ReactNode, useState } from "react";
+import "./CircularProgressBar.scss"
+
+type TVariant = "clockwise" | "static" | "selectable"
+type TCircularProgressProps = {
+    children?: ReactNode;
+    className?: string;
+    danger_limit?: number;
+    is_clockwise?: boolean;
+    progress?: number;
+    radius?: number;
+    stroke?: number;
+    warning_limit?: number;
+    icon?: ReactNode;
+    variant?: TVariant;
+    onSelect?: () => void;
+};
+
+export const CircularProgressBar = ({
+    children,
+    className,
+    danger_limit = 20,
+    is_clockwise = false,
+    progress = 0,
+    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}>
+                {children && (
+                    <foreignObject x="0" y="0" width={radius * 2} height={radius * 2}>
+                        <div className={clsx("deriv-circular-progress__content")}>
+                            {children}
+                        </div>
+                    </foreignObject>
+                )}
+                <circle
+                    className={clsx("deriv-circular-progress__bar", {
+                        "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"}
+                    r={normalizedRadius}
+                    strokeDasharray={`${circumference} ${circumference}`}
+                    strokeWidth={stroke}
+                    style={variant != "clockwise" ? { strokeDashoffset: "none" } : { 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>
+    );
+};

src/main.ts

@@ -2,6 +2,7 @@ export { ActionScreen } from "./components/ActionScreen";
 export { Button } from "./components/Button";
 export {Badge} from "./components/Badge";
 export { Checkbox } from "./components/Checkbox";
+export { CircularProgressBar } from "./components/CircularProgressBar"
 export { Divider } from "./components/Divider";
 export { Dialog } from "./components/Dialog"
 export { Dropdown } from "./components/Dropdown";

stories/CircularProgressBar.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircularProgressBar } from "../src/components/CircularProgressBar";
+
+const meta = {
+    title: "Components/CircularProgressBar",
+    component: CircularProgressBar,
+    parameters: {
+        layout: "centered",
+    },
+    args: {
+        progress: 50,
+        radius: 22,
+        stroke: 3,
+        danger_limit: 20,
+        warning_limit: 50,
+        variant:"clockwise"
+    },
+    argTypes: {
+        progress: {
+            control: { type: "range", min: 0, max: 100, step: 1 },
+        },
+    },
+} as Meta<typeof CircularProgressBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DefaultClockWise: Story = {
+    args: {
+        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: {
+        progress: 70,
+        radius: 30,
+        stroke: 5,
+    }
+}
+
+export const ClockwiseProgress: Story = {
+    args: {
+        progress: 60,
+        is_clockwise: true,
+    }
+}
+
+export const WithIconSelectable: Story = {
+    args: {
+        progress: 80,
+        children: <span>🔄</span>,
+        variant:"selectable"
+    }
+}
+
+export const WarningLimitClockWise = {
+    args: {
+        progress: 40,
+        warning_limit: 30,
+    }
+}
+export const DangerLimitClockWise: Story = {
+    args: {
+        progress: 10,
+        danger_limit: 20,
+    }
+}