Include animation to ProgressBar component

Author: Kubit

src/components/progressBar/progressBar.styled.ts

@@ -22,8 +22,18 @@ export const BarStyled = styled.div<ProgressBarStylesType>`
   ${props => getStyles(props.sizeStyles?.bar)}
 `;
 
-export const ProgressBarStyled = styled.div<ProgressBarStylesType & { progressCompleted?: number }>`
+export const ProgressBarStyled = styled.div<
+  ProgressBarStylesType & {
+    progressCompleted?: number;
+    progressAnimation?: {
+      duration?: string;
+      timingFunction?: string;
+    };
+  }
+>`
   ${props => getStyles(props.styles.progressBar)}
   ${props => getStyles(props.sizeStyles?.progressBar)}
   width: ${({ progressCompleted }) => `${progressCompleted}%`};
+  transition: ${({ progressAnimation }) =>
+    `width ${progressAnimation?.duration} ${progressAnimation?.timingFunction}`};
 `;

src/components/progressBar/progressBarStandAlone.tsx

@@ -53,6 +53,7 @@ const ProgressBarStandaloneComponent = (
             />
             <ProgressBarStyled
               data-testid={dataTestIdProgressBar}
+              progressAnimation={props.progressAnimation}
               progressCompleted={props.progressCompleted}
               sizeStyles={props.sizeStyles}
               styles={props.styles}

src/components/progressBar/stories/argtypes.ts

@@ -98,6 +98,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    progressAnimation: {
+      description: 'Animation in seconds of the progress bar transition',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'object',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     dataTestIdBar: {
       control: { type: 'text' },
       type: { name: 'string' },

src/components/progressBar/stories/progressBar.stories.tsx

@@ -37,6 +37,10 @@ export const ProgressBar: Story = {
     variant: Object.values(variantsObject[themeSelected].ProgressBarVariantType || {})[0] as string,
     size: Object.values(variantsObject[themeSelected].ProgressBarSizeType || {})[0] as string,
     percentProgressCompleted: 50,
+    progressAnimation: {
+      duration: '0s',
+      timingFunction: 'ease-out',
+    },
     barAriaLabel: 'aria-label-0',
     themeArgs: themesObject[themeSelected][STYLES_NAME.PROGRESS_BAR],
   },
@@ -47,6 +51,10 @@ export const ProgressBarWithCtv: Story = {
     variant: Object.values(variantsObject[themeSelected].ProgressBarVariantType || {})[0] as string,
     size: Object.values(variantsObject[themeSelected].ProgressBarSizeType || {})[0] as string,
     percentProgressCompleted: 50,
+    progressAnimation: {
+      duration: '0s',
+      timingFunction: 'ease-out',
+    },
     barAriaLabel: 'aria-label-0',
     ctv: {
       bar: {

src/components/progressBar/types/progressBar.ts

@@ -15,6 +15,10 @@ export interface IProgressBarStandAlone {
   onDragStart?: () => void;
   onDragEnd?: () => void;
   tooltip?: SliderTooltipType;
+  progressAnimation?: {
+    duration?: string;
+    timingFunction?: string;
+  };
 }
 
 export interface IProgressBar<