feat(progressBar): add indeterminate state in progress bar

innovaccer · Jan 29, 2025 · cedf08b · cedf08b
1 parent 53a07c5
commit cedf08b
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 35 deletions.
diff --git a/core/components/atoms/progressBar/ProgressBar.tsx b/core/components/atoms/progressBar/ProgressBar.tsx
@@ -4,6 +4,7 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import styles from '@css/components/progressBar.module.css';
 
 export type ProgressBarSize = 'small' | 'regular';
+export type ProgressBarState = 'default' | 'indeterminate';
 
 export interface ProgressBarProps extends BaseProps {
   /**
@@ -18,16 +19,23 @@ export interface ProgressBarProps extends BaseProps {
    * Size of `Progress Bar`
    */
   size: ProgressBarSize;
+  /**
+   * State of `Progress Bar`
+   */
+  state?: ProgressBarState;
 }
 
 export const ProgressBar = (props: ProgressBarProps) => {
-  const { max, value, className, size } = props;
+  const { max, value, className, size, state } = props;
 
   const baseProps = extractBaseProps(props);
 
-  const style = {
-    width: value > 0 ? `${(Math.min(value, max) * 100) / max}%` : '0',
-  };
+  const style =
+    state === 'indeterminate'
+      ? { width: '100%' }
+      : {
+          width: value > 0 ? `${(Math.min(value, max) * 100) / max}%` : '0',
+        };
 
   const ProgressBarClass = classNames(
     {
@@ -40,6 +48,7 @@ export const ProgressBar = (props: ProgressBarProps) => {
     [styles['ProgressBar-indicator']]: true,
     [styles['ProgressBar-indicator--small']]: size === 'small',
     [styles['ProgressBar-indicator--regular']]: size === 'regular',
+    [styles['ProgressBar-indicator--indeterminate']]: state === 'indeterminate',
   });
 
   return (
@@ -53,6 +62,7 @@ ProgressBar.displayName = 'ProgressBar';
 ProgressBar.defaultProps = {
   max: 100,
   size: 'regular',
+  state: 'default',
 };
 
 export default ProgressBar;
diff --git a/core/components/atoms/progressBar/__stories__/Indeterminate.story.jsx b/core/components/atoms/progressBar/__stories__/Indeterminate.story.jsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ProgressBar } from '@/index';
+
+// CSF format story
+export const indeterminateState = () => {
+  const value = 10;
+  const max = 100;
+
+  return (
+    <div className="w-50">
+      <ProgressBar value={value} max={max} state="indeterminate" />
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Progress Indicators/ProgressBar/Indeterminate State',
+  component: ProgressBar,
+};
diff --git a/core/components/atoms/progressBar/__stories__/WithAnimation.story.jsx b/core/components/atoms/progressBar/__stories__/WithAnimation.story.jsx
diff --git a/core/components/atoms/progressBar/__tests__/ProgressBar.test.tsx b/core/components/atoms/progressBar/__tests__/ProgressBar.test.tsx
@@ -4,11 +4,13 @@ import ProgressBar, { ProgressBarProps as Props, ProgressBarSize } from '../Prog
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
 const sizeList: ProgressBarSize[] = ['regular', 'small'];
+const stateList = ['default', 'indeterminate'];
 
 describe('ProgressBar component', () => {
   const mapper = {
     value: valueHelper(10, { required: true }),
     size: valueHelper(sizeList, { required: true, iterate: true }),
+    state: valueHelper(stateList, { required: true, iterate: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
@@ -55,3 +57,10 @@ describe('ProgressBar component size variant', () => {
     });
   });
 });
+
+describe('ProgressBar component state variant', () => {
+  it('check for indeterminate state of progress bar', () => {
+    const { getByTestId } = render(<ProgressBar state="indeterminate" value={50} />);
+    expect(getByTestId('DesignSystem-ProgressBar-Indicator')).toHaveClass('ProgressBar-indicator--indeterminate');
+  });
+});
diff --git a/core/components/atoms/progressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/core/components/atoms/progressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProgressBar component 
-  value: 10, size: "regular"
+  value: 10, size: "regular", state: "default"
  1`] = `
 <body>
   <div>
@@ -20,7 +20,26 @@ exports[`ProgressBar component
 `;
 
 exports[`ProgressBar component 
-  value: 10, size: "small"
+  value: 10, size: "regular", state: "indeterminate"
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="ProgressBar"
+      data-test="DesignSystem-ProgressBar"
+    >
+      <div
+        class="ProgressBar-indicator ProgressBar-indicator--regular ProgressBar-indicator--indeterminate"
+        data-test="DesignSystem-ProgressBar-Indicator"
+        style="width: 100%;"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ProgressBar component 
+  value: 10, size: "small", state: "default"
  1`] = `
 <body>
   <div>
@@ -37,3 +56,22 @@ exports[`ProgressBar component
   </div>
 </body>
 `;
+
+exports[`ProgressBar component 
+  value: 10, size: "small", state: "indeterminate"
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="ProgressBar"
+      data-test="DesignSystem-ProgressBar"
+    >
+      <div
+        class="ProgressBar-indicator ProgressBar-indicator--small ProgressBar-indicator--indeterminate"
+        data-test="DesignSystem-ProgressBar-Indicator"
+        style="width: 100%;"
+      />
+    </div>
+  </div>
+</body>
+`;
diff --git a/css/src/components/progressBar.module.css b/css/src/components/progressBar.module.css
@@ -17,3 +17,18 @@
 .ProgressBar-indicator--regular {
   height: var(--spacing);
 }
+
+@keyframes progressBarLoading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.ProgressBar-indicator--indeterminate {
+  animation: progressBarLoading 1400ms infinite linear;
+  background: linear-gradient(90deg, var(--primary, #0070dd) 32%, transparent 32%);
+  background-size: 200% 100%;
+}