refactor: remove showPercentage prop from ProgressBar component and r…

…elated tests
Amsterdam-Music-Lab · Nov 18, 2024 · 183285b · 183285b
1 parent ac5117e
commit 183285b
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 45 deletions.
diff --git a/frontend/src/components/ProgressBar/ProgressBar.test.tsx b/frontend/src/components/ProgressBar/ProgressBar.test.tsx
@@ -39,24 +39,10 @@ describe('ProgressBar', () => {
         expect(percentageElement).toBeNull();
     });
 
-    it('hides percentage when showPercentage is false', () => {
-        const { container } = render(<ProgressBar value={75} showPercentage={false} />);
-        const percentageElement = container.querySelector('.aml__progress-bar-content-percentage');
-        expect(percentageElement).toBeFalsy();
-    });
-
-    it('calculates percentage correctly with custom max value when showPercentage is true', () => {
-        const { container, getByText } = render(<ProgressBar value={150} max={200} showPercentage={true} />);
+    it('calculates percentage correctly with custom max value', () => {
+        const { container } = render(<ProgressBar value={150} max={200} />);
         const progressFill = container.querySelector('.aml__progress-bar-fill');
 
         expect(progressFill?.getAttribute('style')).toBe('width: 75%;');
-        expect(getByText('75%')).toBeTruthy();
-    });
-
-    it('displays both label and percentage when both are provided', () => {
-        const { getByText } = render(<ProgressBar value={50} label="Loading..." showPercentage={true} />);
-
-        expect(getByText('Loading...')).toBeTruthy();
-        expect(getByText('50%')).toBeTruthy();
     });
 });
diff --git a/frontend/src/components/ProgressBar/ProgressBar.tsx b/frontend/src/components/ProgressBar/ProgressBar.tsx
@@ -10,10 +10,6 @@ interface ProgressBarProps {
      * Maximum value (defaults to 100)
      */
     max?: number;
-    /**
-     * Show percentage text (defaults to true)
-     */
-    showPercentage?: boolean;
     /**
      * Optional label text to display above progress bar
      */
@@ -23,7 +19,6 @@ interface ProgressBarProps {
 const ProgressBar: React.FC<ProgressBarProps> = ({
     value,
     max = 100,
-    showPercentage = false,
     label,
 }) => {
     const clampedValue = Math.min(Math.max(0, value), max);
@@ -42,11 +37,6 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
                             {label}
                         </span>
                     )}
-                    {showPercentage && (
-                        <span className="aml__progress-bar-content-percentage">
-                            {percentage}%
-                        </span>
-                    )}
                 </div>
             </div>
         </div>

diff --git a/frontend/src/stories/ProgressBar.stories.tsx b/frontend/src/stories/ProgressBar.stories.tsx
@@ -12,25 +12,6 @@ export const Default = {
     args: {
         value: 50,
         max: 100,
-        showPercentage: false,
-        label: "3 / 20",
-    },
-    decorators: [
-        (Story) => (
-            <div
-                style={{ width: "100%", height: "100%", backgroundColor: "#666", padding: "1rem" }}
-            >
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export const WithPercentage = {
-    args: {
-        value: 50,
-        max: 100,
-        showPercentage: true,
         label: "3 / 20",
     },
     decorators: [