From 86c30b7ebff1bf6d49be1e1e94bef263a9702e03 Mon Sep 17 00:00:00 2001
From: Saheb Giri <sahebg@groww.in>
Date: Tue, 6 Feb 2024 15:25:50 +0530
Subject: [PATCH 1/2] fix: progress-bar text alignment and background color

---
 .../atoms/ProgressBar/ProgressBar.tsx         | 80 ++++++-------------
 .../atoms/ProgressBar/progressBar.css         |  3 -
 .../stories/ProgressBar.stories.tsx           | 42 +++++++---
 3 files changed, 56 insertions(+), 69 deletions(-)

diff --git a/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx b/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx
index 5d8deab6..a5409b07 100644
--- a/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx
+++ b/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx
@@ -6,7 +6,6 @@ import { getIntegerRandomNoBetweenTwoNo } from '../../../utils/helper';
 import './progressBar.css';
 
 class ProgressBar extends React.PureComponent<Props> {
-
   progressbarId = '';
 
 
@@ -22,27 +21,14 @@ class ProgressBar extends React.PureComponent<Props> {
 
     return (
       <Waypoint onEnter={this.animateProgressBar}>
-        <div>
-          {
-            isCircular ? this.getCircularProgressBar() : this.getLinearProgressBar()
-          }
-        </div>
-
+        <div>{isCircular ? this.getCircularProgressBar() : this.getLinearProgressBar()}</div>
       </Waypoint>
     );
   }
 
 
   getLinearProgressBar = () => {
-    const {
-      color,
-      backgroundColor,
-      containerThickness,
-      completedValue,
-      size,
-      fillerThickness,
-      borderRadius
-    } = this.props;
+    const { color, backgroundColor, containerThickness, completedValue, size, fillerThickness, borderRadius } = this.props;
 
     const containerStyle = {
       width: size,
@@ -55,36 +41,23 @@ class ProgressBar extends React.PureComponent<Props> {
       height: fillerThickness,
       backgroundColor: color,
       borderRadius: borderRadius
-
     };
 
     return (
-      <div
-        className="pb65LinearMain valign-wrapper fullWidth"
+      <div className="pb65LinearMain valign-wrapper fullWidth"
         style={containerStyle}
       >
-        <div
-          id={this.progressbarId}
+        <div id={this.progressbarId}
           className="pb65LinearFiller"
           style={fillerStyle}
-        >
-        </div>
+        ></div>
       </div>
     );
-  }
+  };
 
 
   getCircularProgressBar = () => {
-    const {
-      color,
-      backgroundColor,
-      containerThickness,
-      completedValue,
-      size,
-      fillerThickness,
-      text,
-      addTextClass
-    } = this.props;
+    const { color, backgroundColor, containerThickness, completedValue, size, fillerThickness, text, addTextClass } = this.props;
 
     const textClass = addTextClass ? addTextClass : '';
 
@@ -96,7 +69,7 @@ class ProgressBar extends React.PureComponent<Props> {
 
     const dashArray = radius * Math.PI * 2;
 
-    const dashOffset = dashArray - (dashArray * completedValue / 100);
+    const dashOffset = dashArray - (dashArray * completedValue) / 100;
 
     const fillerStyle = {
       strokeDasharray: dashArray,
@@ -106,13 +79,11 @@ class ProgressBar extends React.PureComponent<Props> {
     };
 
     return (
-      <svg
-        width={sqSize}
+      <svg width={sqSize}
         height={sqSize}
         viewBox={viewBox}
       >
-        <circle
-          className="pb65CircleMain"
+        <circle className="pb65CircleMain"
           cx={sqSize / 2}
           cy={sqSize / 2}
           r={radius}
@@ -131,20 +102,21 @@ class ProgressBar extends React.PureComponent<Props> {
         />
 
         {
-          text &&
-          <text
-            x="50%"
-            y="50%"
-            className={`${textClass} pb65MainTxt`}
-          >
-            {text}
-          </text>
+          text && (
+            <text x="50%"
+              y="50%"
+              fill='currentColor'
+              dominantBaseline="middle"
+              textAnchor="middle"
+              className={`pb65MainTxt ${textClass}`}
+            >
+              {text}
+            </text>
+          )
         }
       </svg>
-
     );
-
-  }
+  };
 
 
   animateProgressBar = () => {
@@ -153,7 +125,7 @@ class ProgressBar extends React.PureComponent<Props> {
     if (elem) {
       elem.style.display = 'block';
     }
-  }
+  };
 
 
   public static defaultProps: DefaultProps = {
@@ -165,7 +137,7 @@ class ProgressBar extends React.PureComponent<Props> {
     text: '',
     addTextClass: '',
     size: ''
-  }
+  };
 }
 
 
@@ -190,7 +162,7 @@ type DefaultProps = {
   text styling allowed - Note: The text is added using and <svg> <text> element and doesn't support the normal class styling
   please use fill instead of color and equivalent styling for <text> element
   */
-}
+};
 
 
 type RequiredProps = {
@@ -199,7 +171,7 @@ type RequiredProps = {
   /*percentage of the filled amount*/
   completedValue: number;
   name: string;
-}
+};
 
 export type Props = DefaultProps & RequiredProps;
 
diff --git a/packages/ui-toolkit/src/components/atoms/ProgressBar/progressBar.css b/packages/ui-toolkit/src/components/atoms/ProgressBar/progressBar.css
index d146dc46..c8ac78ec 100644
--- a/packages/ui-toolkit/src/components/atoms/ProgressBar/progressBar.css
+++ b/packages/ui-toolkit/src/components/atoms/ProgressBar/progressBar.css
@@ -1,12 +1,10 @@
 .pb65LinearMain {
   border-radius: 5;
-  background-color: var(--gray150);
   height: 10px;
 }
 
 .pb65CircleMain {
   stroke-linecap: round;
-  stroke: var(--gray150);
   fill: none;
 }
 
@@ -27,7 +25,6 @@
 }
 
 .pb65MainTxt {
-  text-anchor: middle;
   font-size: 16px;
 }
 
diff --git a/packages/ui-toolkit/stories/ProgressBar.stories.tsx b/packages/ui-toolkit/stories/ProgressBar.stories.tsx
index 9d5f0828..d2a97614 100644
--- a/packages/ui-toolkit/stories/ProgressBar.stories.tsx
+++ b/packages/ui-toolkit/stories/ProgressBar.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Story } from "@storybook/react";
+import { Story } from '@storybook/react';
 
 import { ProgressBar } from '../src/components/atoms';
-import { Props as ProgressBarProps } from '../src/components/atoms/ProgressBar';
+import { Props as ProgressBarProps } from '../src/components/atoms/ProgressBar/ProgressBar';
 
 export default {
   title: 'ProgressBar',
@@ -10,17 +10,35 @@ export default {
 };
 
 
-export const Template: Story<ProgressBarProps> = (args) => {
+const Template: Story<ProgressBarProps> = (args) => {
   return (
-    <div style={{margin: 24}}>
-      <ProgressBar completedValue={30} {...args} />
+    <div style={{ margin: 24 }}>
+      <ProgressBar {...args} />
     </div>
   );
-}
+};
+
+export const Linear = Template.bind({});
+Linear.args = {
+  name: 'Linear Progress bar',
+  color: 'var(--purple500)',
+  fillerThickness: 8,
+  containerThickness: 5,
+  backgroundColor: 'var(--gray150)',
+  size: 420,
+  completedValue: 80
+};
 
-Template.args = {
-  name: "Demo ProgressBar",
-  color: "var(--purple500)",
-  fillerThickness: 10,
-  size: 420
-}
+export const Circular = Template.bind({});
+Circular.args = {
+  name: 'Cicular progress bar',
+  isCircular: true,
+  color: 'var(--green500)',
+  backgroundColor: 'var(--gray150)',
+  text: 'Hello',
+  addTextClass: 'contentAccent',
+  fillerThickness: 6,
+  containerThickness: 2,
+  size: 100,
+  completedValue: 50
+};

From 0854bbb71de1837f5fcc90c33a060b9f3f88eee7 Mon Sep 17 00:00:00 2001
From: Saheb Giri <sahebg@groww.in>
Date: Wed, 7 Feb 2024 19:13:25 +0530
Subject: [PATCH 2/2] fix: remove extra div

---
 .../src/components/atoms/ProgressBar/ProgressBar.tsx      | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx b/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx
index a5409b07..6e789644 100644
--- a/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx
+++ b/packages/ui-toolkit/src/components/atoms/ProgressBar/ProgressBar.tsx
@@ -19,11 +19,7 @@ class ProgressBar extends React.PureComponent<Props> {
   render() {
     const { isCircular } = this.props;
 
-    return (
-      <Waypoint onEnter={this.animateProgressBar}>
-        <div>{isCircular ? this.getCircularProgressBar() : this.getLinearProgressBar()}</div>
-      </Waypoint>
-    );
+    return <Waypoint onEnter={this.animateProgressBar}>{isCircular ? this.getCircularProgressBar() : this.getLinearProgressBar()}</Waypoint>;
   }
 
 
@@ -105,7 +101,7 @@ class ProgressBar extends React.PureComponent<Props> {
           text && (
             <text x="50%"
               y="50%"
-              fill='currentColor'
+              fill="currentColor"
               dominantBaseline="middle"
               textAnchor="middle"
               className={`pb65MainTxt ${textClass}`}