feat: create Progressbar component

packages/components/src/atoms/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, useMemo, HTMLAttributes } from 'react'
+
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+  /* Current value of the progress */
+  value?: number
+  /* Minimum value (default 0) */
+  min?: number
+  /* Maximum value (default 100) */
+  max?: number /*
+   * Optional test ID for testing*/
+  testId?: string
+}
+
+const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  function ProgressBar(
+    {
+      value = 0,
+      min = 0,
+      max = 100,
+      testId = 'fs-progress-bar',
+      ...otherProps
+    },
+    ref
+  ) {
+    const clampedValue = useMemo(() => {
+      const safeMax = Math.max(min, max)
+      return Math.min(Math.max(value, min), safeMax)
+    }, [value, min, max])
+
+    const fillPercent = ((clampedValue - min) / (max - min)) * 100
+
+    return (
+      <div ref={ref} data-fs-progress-bar data-testid={testId} {...otherProps}>
+        <div data-fs-progress-bar-track>
+          <div data-fs-progress-bar-fill style={{ width: `${fillPercent}%` }} />
+        </div>
+      </div>
+    )
+  }
+)
+export default ProgressBar

packages/components/src/atoms/ProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ProgressBar'
+export { ProgressBarProps } from './ProgressBar'

packages/components/src/index.ts

@@ -32,6 +32,8 @@ export { default as Select } from './atoms/Select'
 export type { SelectProps } from './atoms/Select'
 export { default as Slider } from './atoms/Slider'
 export type { SliderProps } from './atoms/Slider'
+export { default as ProgressBar } from './atoms/ProgressBar'
+export type { ProgressBarProps } from './atoms/ProgressBar'
 export { default as SROnly } from './atoms/SROnly'
 
 // Molecules
@@ -67,12 +69,8 @@ export type {
   CarouselBulletsProps,
 } from './molecules/Carousel'
 
-export {
-  default as Card
-} from './molecules/Card'
-export type {
-  CardProps
-} from './molecules/Card'
+export { default as Card } from './molecules/Card'
+export type { CardProps } from './molecules/Card'
 
 export {
   default as CartItem,
@@ -369,5 +367,5 @@ export {
 export type {
   SKUMatrixProps,
   SKUMatrixTriggerProps,
-  SKUMatrixSidebarProps
+  SKUMatrixSidebarProps,
 } from './organisms/SKUMatrix'

packages/ui/src/components/atoms/ProgressBar/styles.scss

@@ -0,0 +1,33 @@
+[data-fs-progress-bar] {
+  // --------------------------------------------------------
+  // Design Tokens for ProgressBar
+  // --------------------------------------------------------
+
+  --fs-progress-bar-height: 4px;
+  --fs-progress-bar-radius: 4px;
+  --fs-progress-bar-track-color: var(--fs-color-neutral-2);
+  --fs-progress-bar-fill-color: var(--fs-color-main-2);
+  --fs-progress-bar-transition-function: var(--fs-transition-function);
+  --fs-progress-bar-transition-property: var(--fs-transition-property);
+  --fs-progress-bar-transition-timing: var(--fs-transition-timing);
+
+  // Default properties
+  width: 100%;
+  height: var(--fs-progress-bar-height);
+
+  [data-fs-progress-bar-track] {
+    background-color: var(--fs-progress-bar-track-color);
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--fs-progress-bar-radius);
+  }
+
+  [data-fs-progress-bar-fill] {
+    background-color: var(--fs-progress-bar-fill-color);
+    height: 100%;
+    transition: var(--fs-progress-bar-transition-property)
+      var(--fs-progress-bar-transition-timing)
+      var(--fs-progress-bar-transition-function);
+  }
+}