feat: made changes in test cases and added div props

deriv-com · Mar 6, 2024 · 9fde470 · 9fde470
1 parent 8e42f04
commit 9fde470
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/lib/components/LinearProgressBar/LinearProgressBar.scss b/lib/components/LinearProgressBar/LinearProgressBar.scss
@@ -7,7 +7,7 @@ $border_section:#f2f3f4;
 $state_hover:#e6e9e9;
 $BORDER_RADIUS:4px;
 
-.deriv-progress-slider {
+.deriv-linear-progress-bar {
     position: relative;
     width: 100%;
     padding: unset;

diff --git a/lib/components/LinearProgressBar/__test__/LinearProgressBar.spec.tsx b/lib/components/LinearProgressBar/__test__/LinearProgressBar.spec.tsx
@@ -27,7 +27,7 @@ describe('LinearProgressBar', () => {
         warning_limit={80}
       />
     );
-    const loadingBar=document.querySelector(".deriv-progress-slider__infinite-loader");
+    const loadingBar=document.querySelector(".deriv-linear-progress-bar__infinite-loader");
     expect(loadingBar).toBeInTheDocument();
   });
 
@@ -41,7 +41,9 @@ describe('LinearProgressBar', () => {
         warning_limit={80}
       />
     );
-    expect(getByText('Custom Label')).toBeInTheDocument();
+    const label = getByText('Custom Label');
+    expect(label).toBeInTheDocument();
+    expect(label.nodeName).toBe('SPAN');
   });
 
   it('renders progress bar with correct color based on percentage', () => {
@@ -54,8 +56,8 @@ describe('LinearProgressBar', () => {
         warning_limit={80}
       />
     );
-    const progressBar = document.querySelector('.deriv-progress-slider__line');
-    expect(progressBar).toHaveClass('deriv-progress-slider__line--yellow');
+    const progressBar = document.querySelector('.deriv-linear-progress-bar__line');
+    expect(progressBar).toHaveClass('deriv-linear-progress-bar__line--yellow');
   });
 
 });
diff --git a/lib/components/LinearProgressBar/index.tsx b/lib/components/LinearProgressBar/index.tsx
@@ -1,46 +1,45 @@
-import React from 'react';
+import React,{ComponentProps} from 'react';
 import clsx from 'clsx';
 import { Text } from '../Text';
 import { TGenericSizes } from "../../types";
 import "./LinearProgressBar.scss"
 
-type TLinearProgressProps = {
-    className?: string;
+type TLinearProgressProps = ComponentProps<"div"> & {
     danger_limit:number;
     is_loading: boolean;
     label:React.ReactNode;
     percentage:number;
-    size?: Extract<TGenericSizes, "lg" | "md" | "sm" | "xs">;
+    labelSize?: Extract<TGenericSizes, "lg" | "md" | "sm" | "xs">;
     warning_limit:number;
 };
 
 export const LinearProgressBar = ({
-    className,
     danger_limit,
     is_loading,
     label,
     percentage,
-    size="xs",
-    warning_limit
+    labelSize="xs",
+    warning_limit,
+    ...rest
 }: TLinearProgressProps) => {
     return (
-        <div className={clsx('deriv-progress-slider', className)}>
+        <div className={clsx('deriv-linear-progress-bar')} {...rest}>
                 <React.Fragment>
-                    <Text size={size} className='deriv-progress-slider__remaining-time'>
+                    <Text size={labelSize} className='deriv-linear-progress-bar__remaining-time'>
                        {label}
                     </Text>
                     {is_loading || percentage < 1 ? (
-                        <div className='deriv-progress-slider__infinite-loader'>
-                            <div className='deriv-progress-slider__infinite-loader--indeterminate' />
+                        <div className='deriv-linear-progress-bar__infinite-loader'>
+                            <div className='deriv-linear-progress-bar__infinite-loader--indeterminate' />
                         </div>
                     ) : (
                         /* Calculate line width based on percentage of time left */
-                        <div className='deriv-progress-slider__track'>
+                        <div className='deriv-linear-progress-bar__track'>
                             <div
-                                className={clsx('deriv-progress-slider__line', {
-                                    'deriv-progress-slider__line--green': percentage >= warning_limit,
-                                    'deriv-progress-slider__line--yellow': percentage < warning_limit && percentage >= danger_limit,
-                                    'deriv-progress-slider__line--red': percentage < danger_limit,
+                                className={clsx('deriv-linear-progress-bar__line', {
+                                    'deriv-linear-progress-bar__line--green': percentage >= warning_limit,
+                                    'deriv-linear-progress-bar__line--yellow': percentage < warning_limit && percentage >= danger_limit,
+                                    'deriv-linear-progress-bar__line--red': percentage < danger_limit,
                                 })}
                                 style={{ width: `${percentage}%` }}
                             />