From a78639a233354f93e1fe79e0a9437d1ba19b9f54 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 19 Mar 2024 15:23:21 +0400 Subject: [PATCH 01/13] feat: implemented circular linear progress bar component and stories --- .../CircularProgressBar.scss | 30 +++++++++ src/components/CircularProgressBar/index.tsx | 51 +++++++++++++++ src/main.ts | 1 + stories/CircularProgressBar.stories.tsx | 65 +++++++++++++++++++ 4 files changed, 147 insertions(+) create mode 100644 src/components/CircularProgressBar/CircularProgressBar.scss create mode 100644 src/components/CircularProgressBar/index.tsx create mode 100644 stories/CircularProgressBar.stories.tsx diff --git a/src/components/CircularProgressBar/CircularProgressBar.scss b/src/components/CircularProgressBar/CircularProgressBar.scss new file mode 100644 index 00000000..57a40c1f --- /dev/null +++ b/src/components/CircularProgressBar/CircularProgressBar.scss @@ -0,0 +1,30 @@ +.deriv-circular-progress { + position: relative; + line-height: 0; + width: fit-content; + + &__bar { + transform: scaleX(-1) rotate(-90deg); + transform-origin: 50% 50%; + transition: stroke-dashoffset 1s; + stroke: var(--brand-secondary); + + &--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%); + } +} diff --git a/src/components/CircularProgressBar/index.tsx b/src/components/CircularProgressBar/index.tsx new file mode 100644 index 00000000..61cd5754 --- /dev/null +++ b/src/components/CircularProgressBar/index.tsx @@ -0,0 +1,51 @@ +import clsx from 'clsx'; +import React, { ReactNode } from 'react'; +import "./CircularProgressBar.scss" + + +type TCircularProgressProps = { + className?: string; + danger_limit?: number; + is_clockwise?: boolean; + progress?: number; + radius?: number; + stroke?: number; + warning_limit?: number; + icon?: ReactNode; +}; + +export const CircularProgressBar = ({ + className, + danger_limit = 20, + icon, + is_clockwise = false, + progress = 0, + radius = 22, + stroke = 3, + warning_limit = 50, +}: TCircularProgressProps) => { + const normalizedRadius = radius - stroke / 2; + const circumference = normalizedRadius * 2 * Math.PI; + const strokeDashoffset = circumference - (progress / 100) * circumference; + return ( +
+ {icon} + + danger_limit, + 'deriv-circular-progress__bar--danger': progress <= danger_limit, + })} + cx={radius} + cy={radius} + fill='transparent' + r={normalizedRadius} + strokeDasharray={`${circumference} ${circumference}`} + strokeWidth={stroke} + style={{ strokeDashoffset }} + /> + +
+ ); +}; diff --git a/src/main.ts b/src/main.ts index 76d97a79..a54b5644 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,7 @@ export { ActionScreen } from "./components/ActionScreen"; export { Button } from "./components/Button"; 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"; diff --git a/stories/CircularProgressBar.stories.tsx b/stories/CircularProgressBar.stories.tsx new file mode 100644 index 00000000..37b4d1f1 --- /dev/null +++ b/stories/CircularProgressBar.stories.tsx @@ -0,0 +1,65 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { CircularProgressBar } from "../src/components/CircularProgressBar"; + +const meta = { + title: "Components/ProgressBar", + component: CircularProgressBar, + parameters: { + layout: "centered", + }, + args: { + progress: 50, + radius: 22, + stroke: 3, + danger_limit: 20, + warning_limit: 50, + }, + argTypes: { + progress: { + control: { type: "range", min: 0, max: 100, step: 1 }, + }, + }, +} as Meta; +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + progress: 50, + } +} + +export const CustomRadiusAndStroke: Story = { + args: { + progress: 70, + radius: 30, + stroke: 5, + } +} + +export const ClockwiseProgress: Story = { + args: { + progress: 60, + is_clockwise: true, + } +} + +export const WithIcon: Story = { + args: { + progress: 80, + icon: 🔄, + } +} + +export const WarningLimit = { + args: { + progress: 40, + warning_limit: 30, + } +} +export const DangerLimit: Story = { + args: { + progress: 10, + danger_limit: 20, + } +} From 8de8fa2facbcae7eae6a050562fb1dfcafcb2e1f Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Wed, 20 Mar 2024 10:27:24 +0400 Subject: [PATCH 02/13] feat : made changes in styling --- src/components/CircularProgressBar/CircularProgressBar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CircularProgressBar/CircularProgressBar.scss b/src/components/CircularProgressBar/CircularProgressBar.scss index 57a40c1f..b7541c01 100644 --- a/src/components/CircularProgressBar/CircularProgressBar.scss +++ b/src/components/CircularProgressBar/CircularProgressBar.scss @@ -7,7 +7,7 @@ transform: scaleX(-1) rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s; - stroke: var(--brand-secondary); + stroke: var(--du-brand-secondary, #85acb0); &--warning { stroke: var(--du-status-warning, #ffad3a); From 3a8116653e6cd1fdcf140ae254353ad7d15672b9 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Wed, 20 Mar 2024 14:38:12 +0400 Subject: [PATCH 03/13] feat: added styling for children components --- .../CircularProgressBar/CircularProgressBar.scss | 16 +++++++++++++++- src/components/CircularProgressBar/index.tsx | 11 +++++++++-- stories/CircularProgressBar.stories.tsx | 2 +- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/CircularProgressBar/CircularProgressBar.scss b/src/components/CircularProgressBar/CircularProgressBar.scss index b7541c01..5bd41487 100644 --- a/src/components/CircularProgressBar/CircularProgressBar.scss +++ b/src/components/CircularProgressBar/CircularProgressBar.scss @@ -3,6 +3,17 @@ line-height: 0; width: fit-content; + &__content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + &__bar { transform: scaleX(-1) rotate(-90deg); transform-origin: 50% 50%; @@ -12,13 +23,16 @@ &--warning { stroke: var(--du-status-warning, #ffad3a); } + &--danger { stroke: var(--du-status-danger, #ec3f3f) } } + &--clockwise { transform: rotate(-90deg); } + &__icon { position: absolute; width: 1.6rem; @@ -27,4 +41,4 @@ top: 50%; transform: translate(-50%, -50%); } -} +} \ No newline at end of file diff --git a/src/components/CircularProgressBar/index.tsx b/src/components/CircularProgressBar/index.tsx index 61cd5754..338c2584 100644 --- a/src/components/CircularProgressBar/index.tsx +++ b/src/components/CircularProgressBar/index.tsx @@ -4,6 +4,7 @@ import "./CircularProgressBar.scss" type TCircularProgressProps = { + children:ReactNode className?: string; danger_limit?: number; is_clockwise?: boolean; @@ -15,9 +16,9 @@ type TCircularProgressProps = { }; export const CircularProgressBar = ({ + children, className, danger_limit = 20, - icon, is_clockwise = false, progress = 0, radius = 22, @@ -29,8 +30,14 @@ export const CircularProgressBar = ({ const strokeDashoffset = circumference - (progress / 100) * circumference; return (
- {icon} + {children && ( + +
+ {children} +
+ + )} 🔄, + children: 🔄, } } From 8d3e4c54ff273e766f999465d7a406aae6c69446 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Thu, 21 Mar 2024 16:34:55 +0400 Subject: [PATCH 04/13] feat: added variant and select styling --- src/components/CircularProgressBar/index.tsx | 43 ++++++++++++++++---- stories/CircularProgressBar.stories.tsx | 4 ++ 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/components/CircularProgressBar/index.tsx b/src/components/CircularProgressBar/index.tsx index 338c2584..2588f225 100644 --- a/src/components/CircularProgressBar/index.tsx +++ b/src/components/CircularProgressBar/index.tsx @@ -1,10 +1,10 @@ import clsx from 'clsx'; -import React, { ReactNode } from 'react'; +import React, { ReactNode, useState } from 'react'; import "./CircularProgressBar.scss" - +type TVariant = "clockwise" | "static" | "selectable" type TCircularProgressProps = { - children:ReactNode + children: ReactNode; className?: string; danger_limit?: number; is_clockwise?: boolean; @@ -13,6 +13,8 @@ type TCircularProgressProps = { stroke?: number; warning_limit?: number; icon?: ReactNode; + variant: TVariant; + onSelect?: () => void; }; export const CircularProgressBar = ({ @@ -24,14 +26,26 @@ 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(!selected); + if (onSelect) { + onSelect(); + } + }; + return (
- - {children && ( + + {children && (
{children} @@ -43,15 +57,30 @@ 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='transparent' + fill={variant === 'selectable' && selected ? 'blue' : 'transparent'} r={normalizedRadius} strokeDasharray={`${circumference} ${circumference}`} strokeWidth={stroke} - style={{ strokeDashoffset }} + style={variant != "clockwise" ? { strokeDashoffset: 'none' } : { strokeDashoffset }} /> + { + variant != "clockwise" && ( + + ) + }
); diff --git a/stories/CircularProgressBar.stories.tsx b/stories/CircularProgressBar.stories.tsx index f8326d1a..003ea532 100644 --- a/stories/CircularProgressBar.stories.tsx +++ b/stories/CircularProgressBar.stories.tsx @@ -13,6 +13,7 @@ const meta = { stroke: 3, danger_limit: 20, warning_limit: 50, + variant:"clockwise" }, argTypes: { progress: { @@ -26,6 +27,7 @@ type Story = StoryObj; export const Default: Story = { args: { progress: 50, + variant:"static" } } @@ -34,6 +36,7 @@ export const CustomRadiusAndStroke: Story = { progress: 70, radius: 30, stroke: 5, + variant:"static" } } @@ -48,6 +51,7 @@ export const WithIcon: Story = { args: { progress: 80, children: 🔄, + variant:"selectable" } } From c230cbd04ee6f22e72c833735a6c8e0852be73fb Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Mon, 25 Mar 2024 15:05:10 +0400 Subject: [PATCH 05/13] story: added stories for circular progressbar --- stories/CircularProgressBar.stories.tsx | 27 +++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/stories/CircularProgressBar.stories.tsx b/stories/CircularProgressBar.stories.tsx index 003ea532..f67e19f8 100644 --- a/stories/CircularProgressBar.stories.tsx +++ b/stories/CircularProgressBar.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { CircularProgressBar } from "../src/components/CircularProgressBar"; const meta = { - title: "Components/ProgressBar", + title: "Components/CircularProgressBar", component: CircularProgressBar, parameters: { layout: "centered", @@ -24,19 +24,30 @@ const meta = { export default meta; type Story = StoryObj; -export const Default: Story = { +export const DefaultClockWise: Story = { args: { progress: 50, - variant:"static" } } +export const StaticProgressBar:Story = { + args:{ + progress: 50, + variant: 'static', + } +} + +export const SelectableProgressBar:Story = { + args:{ + progress: 30, + variant: 'selectable', + } +} -export const CustomRadiusAndStroke: Story = { +export const CustomRadiusAndStrokeClockwise: Story = { args: { progress: 70, radius: 30, stroke: 5, - variant:"static" } } @@ -47,7 +58,7 @@ export const ClockwiseProgress: Story = { } } -export const WithIcon: Story = { +export const WithIconSelectable: Story = { args: { progress: 80, children: 🔄, @@ -55,13 +66,13 @@ export const WithIcon: Story = { } } -export const WarningLimit = { +export const WarningLimitClockWise = { args: { progress: 40, warning_limit: 30, } } -export const DangerLimit: Story = { +export const DangerLimitClockWise: Story = { args: { progress: 10, danger_limit: 20, From ab2b76215e4b768d84e3412663cd44d9e55606ed Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 10:48:14 +0400 Subject: [PATCH 06/13] feat: added test cases for circular progressbar --- .../__test__/CircularProgressBar.spec.tsx | 34 +++++++++++++++++++ src/components/CircularProgressBar/index.tsx | 2 +- 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx diff --git a/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx b/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx new file mode 100644 index 00000000..df06e6d7 --- /dev/null +++ b/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(); + expect(container.querySelector('.deriv-circular-progress__bar')).toBeInTheDocument(); + }); + + it('renders children correctly', () => { + const { getByText } = render( + +
Child content
+ + ); + expect(getByText('Child content')).toBeInTheDocument(); + }); + + it('handles selection correctly for selectable variant', () => { + const onSelectMock = jest.fn(); + const { container } = render( + + ); + const progressBar = container.querySelector('.deriv-circular-progress__bar'); + if (progressBar) { + fireEvent.click(progressBar); + expect(onSelectMock).toHaveBeenCalled(); + } else { + fail('Progress bar not found'); + } + + }); +}); diff --git a/src/components/CircularProgressBar/index.tsx b/src/components/CircularProgressBar/index.tsx index 2588f225..aecd6392 100644 --- a/src/components/CircularProgressBar/index.tsx +++ b/src/components/CircularProgressBar/index.tsx @@ -4,7 +4,7 @@ import "./CircularProgressBar.scss" type TVariant = "clockwise" | "static" | "selectable" type TCircularProgressProps = { - children: ReactNode; + children?: ReactNode; className?: string; danger_limit?: number; is_clockwise?: boolean; From 49a49d242a23968b9151388b8582920293f16f71 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 11:55:34 +0400 Subject: [PATCH 07/13] feat: to fix EOF error --- src/components/CircularProgressBar/CircularProgressBar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CircularProgressBar/CircularProgressBar.scss b/src/components/CircularProgressBar/CircularProgressBar.scss index 5bd41487..dcbeebb3 100644 --- a/src/components/CircularProgressBar/CircularProgressBar.scss +++ b/src/components/CircularProgressBar/CircularProgressBar.scss @@ -41,4 +41,4 @@ top: 50%; transform: translate(-50%, -50%); } -} \ No newline at end of file +} From 0653e015af644d55f3bc3fd3479a6f4ab6c1a8cd Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 12:31:33 +0400 Subject: [PATCH 08/13] feat: added prev state in useState hook --- src/components/CircularProgressBar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CircularProgressBar/index.tsx b/src/components/CircularProgressBar/index.tsx index aecd6392..dd1d3048 100644 --- a/src/components/CircularProgressBar/index.tsx +++ b/src/components/CircularProgressBar/index.tsx @@ -36,7 +36,7 @@ export const CircularProgressBar = ({ const [selected, setSelected] = useState(false); const handleSelect = () => { - setSelected(!selected); + setSelected(prev=>!prev); if (onSelect) { onSelect(); } From 12fa5679879ac9bec85b6c4809a357e3f7fc054d Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 13:15:08 +0400 Subject: [PATCH 09/13] feat: added inset in styling --- src/components/CircularProgressBar/CircularProgressBar.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/CircularProgressBar/CircularProgressBar.scss b/src/components/CircularProgressBar/CircularProgressBar.scss index dcbeebb3..8fcfb26a 100644 --- a/src/components/CircularProgressBar/CircularProgressBar.scss +++ b/src/components/CircularProgressBar/CircularProgressBar.scss @@ -5,9 +5,7 @@ &__content { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + inset:0; display: flex; flex-direction: column; align-items: center; From ee2a5de358d86a5a0b1769bbfff63b1d9a8b8188 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 14:57:02 +0400 Subject: [PATCH 10/13] feat: made variant as optional --- src/components/CircularProgressBar/index.tsx | 28 ++++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/CircularProgressBar/index.tsx b/src/components/CircularProgressBar/index.tsx index dd1d3048..292628ab 100644 --- a/src/components/CircularProgressBar/index.tsx +++ b/src/components/CircularProgressBar/index.tsx @@ -1,5 +1,5 @@ -import clsx from 'clsx'; -import React, { ReactNode, useState } from 'react'; +import clsx from "clsx"; +import React, { ReactNode, useState } from "react"; import "./CircularProgressBar.scss" type TVariant = "clockwise" | "static" | "selectable" @@ -13,7 +13,7 @@ type TCircularProgressProps = { stroke?: number; warning_limit?: number; icon?: ReactNode; - variant: TVariant; + variant?: TVariant; onSelect?: () => void; }; @@ -43,8 +43,8 @@ export const CircularProgressBar = ({ }; return ( -
- +
+ {children && (
@@ -53,19 +53,19 @@ export const CircularProgressBar = ({ )} danger_limit, - 'deriv-circular-progress__bar--danger': progress <= danger_limit, - 'deriv-circular-progress__bar--selected': selected && variant === 'selectable' + 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'} + fill={variant === "selectable" && selected ? "blue" : "transparent"} r={normalizedRadius} strokeDasharray={`${circumference} ${circumference}`} strokeWidth={stroke} - style={variant != "clockwise" ? { strokeDashoffset: 'none' } : { strokeDashoffset }} + style={variant != "clockwise" ? { strokeDashoffset: "none" } : { strokeDashoffset }} /> { variant != "clockwise" && ( @@ -73,8 +73,8 @@ export const CircularProgressBar = ({ cx={radius} cy={radius} r={normalizedRadius} - fill='none' - stroke='#E8EEFC' + fill="none" + stroke="#E8EEFC" strokeDasharray={`${circumference} ${circumference}`} strokeWidth={stroke} style={{ strokeDashoffset: circumference - strokeDashoffset }} From f15878b4eca92c7dc7aa754f7399bf054a8085e6 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Mon, 1 Apr 2024 11:17:29 +0400 Subject: [PATCH 11/13] story: added docs to storybook for circular component --- stories/CircularProgressBar.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/stories/CircularProgressBar.stories.tsx b/stories/CircularProgressBar.stories.tsx index f67e19f8..0411d10c 100644 --- a/stories/CircularProgressBar.stories.tsx +++ b/stories/CircularProgressBar.stories.tsx @@ -4,6 +4,7 @@ import { CircularProgressBar } from "../src/components/CircularProgressBar"; const meta = { title: "Components/CircularProgressBar", component: CircularProgressBar, + tags: ["autodocs"], parameters: { layout: "centered", }, From 069a5fb70aeb44f842a324af1c07523ab4441f4e Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Wed, 3 Apr 2024 10:31:43 +0400 Subject: [PATCH 12/13] feat: removed variant from circular progress bar component --- .../__test__/CircularProgressBar.spec.tsx | 37 +++++++------------ src/components/CircularProgressBar/index.tsx | 37 ++----------------- stories/CircularProgressBar.stories.tsx | 29 +++------------ 3 files changed, 24 insertions(+), 79 deletions(-) diff --git a/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx b/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx index df06e6d7..c200ac65 100644 --- a/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx +++ b/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(); - expect(container.querySelector('.deriv-circular-progress__bar')).toBeInTheDocument(); +describe("CircularProgressBar Component", () => { + it("renders correctly with default props", () => { + const { container } = render(); + expect(container.querySelector(".deriv-circular-progress__bar")).toBeInTheDocument(); }); - it('renders children correctly', () => { + it("renders children correctly", () => { const { getByText } = render( - +
Child content
 ); - expect(getByText('Child content')).toBeInTheDocument(); + expect(getByText("Child content")).toBeInTheDocument(); }); - it('handles selection correctly for selectable variant', () => { - const onSelectMock = jest.fn(); - const { container } = render( - - ); - 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(); + expect(container.querySelector(".deriv-circular-progress--clockwise")).toBeInTheDocument(); }); + }); diff --git a/src/components/CircularProgressBar/index.tsx b/src/components/CircularProgressBar/index.tsx index 292628ab..09bfeb0f 100644 --- a/src/components/CircularProgressBar/index.tsx +++ b/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 (
- + {children && (
@@ -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" && ( - - ) - }
); diff --git a/stories/CircularProgressBar.stories.tsx b/stories/CircularProgressBar.stories.tsx index 0411d10c..c44d4f3c 100644 --- a/stories/CircularProgressBar.stories.tsx +++ b/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; 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: 🔄, - variant:"selectable" - } -} - export const WarningLimitClockWise = { args: { - progress: 40, + progress: 30, warning_limit: 30, } } From 49b41d994d79d1e9ff0c84dc5eb64de695683662 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Wed, 3 Apr 2024 11:00:12 +0400 Subject: [PATCH 13/13] test: added new test cases in circular component --- .../__test__/CircularProgressBar.spec.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx b/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx index c200ac65..9cb86f31 100644 --- a/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx +++ b/src/components/CircularProgressBar/__test__/CircularProgressBar.spec.tsx @@ -22,4 +22,30 @@ describe("CircularProgressBar Component", () => { expect(container.querySelector(".deriv-circular-progress--clockwise")).toBeInTheDocument(); }); + it("renders circular progress bar with custom className", () => { + const { container } = render(); + const circularProgressBar = container.querySelector(".custom-class"); + expect(circularProgressBar).toBeInTheDocument(); + expect(circularProgressBar).toHaveClass("deriv-circular-progress", "custom-class"); + }); + + it("renders circular progress bar with custom radius and stroke", () => { + const { container } = render(); + const circularProgressBar = container.querySelector(".deriv-circular-progress__bar"); + expect(circularProgressBar).toHaveAttribute("r", "27.5"); + expect(circularProgressBar).toHaveAttribute("stroke-width", "5"); + }); + + it("renders circular progress bar with custom progress and warning limits", () => { + const { container } = render(); + const circularProgressBar = container.querySelector(".deriv-circular-progress__bar"); + expect(circularProgressBar).toHaveClass("deriv-circular-progress__bar--warning"); + }); + + it("renders circular progress bar with custom progress and danger limits", () => { + const { container } = render(); + const circularProgressBar = container.querySelector(".deriv-circular-progress__bar"); + expect(circularProgressBar).toHaveClass("deriv-circular-progress__bar--danger"); + }); + });