feat: create BarChart component

packages/components/src/atoms/BarChart/BarChart.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, useMemo } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface BarChartProps extends HTMLAttributes<HTMLDivElement> {
+  /* Current value of the progress */
+  value?: number
+  /* Minimum value (default 0) */
+  min?: number
+  /* Maximum value (default 100) */
+  max?: number
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const BarChart = forwardRef<HTMLDivElement, BarChartProps>(function BarChart(
+  { value = 0, min = 0, max = 100, testId = 'fs-bar-chart', ...otherProps },
+  ref
+) {
+  const fillPercent = useMemo(() => {
+    const safeMax = Math.max(min, max)
+    const safeMin = Math.min(min, max)
+
+    if (safeMax === safeMin) {
+      return 0
+    }
+
+    const clampedValue = Math.min(Math.max(value, safeMin), safeMax)
+    return ((clampedValue - safeMin) / (safeMax - safeMin)) * 100
+  }, [value, min, max])
+
+  return (
+    <div ref={ref} data-fs-bar-chart data-testid={testId} {...otherProps}>
+      <div data-fs-bar-chart-track>
+        <div data-fs-bar-chart-fill style={{ width: `${fillPercent}%` }} />
+      </div>
+    </div>
+  )
+})
+export default BarChart

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

@@ -0,0 +1,2 @@
+export { default } from './BarChart'
+export { BarChartProps } from './BarChart'

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 BarChart } from './atoms/BarChart'
+export type { BarChartProps } from './atoms/BarChart'
 export { default as SROnly } from './atoms/SROnly'
 
 // Molecules

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

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

packages/ui/src/styles/components.scss

@@ -15,6 +15,7 @@
 @import "../components/atoms/Skeleton/styles";
 @import "../components/atoms/Slider/styles";
 @import "../components/atoms/SROnly/styles";
+@import "../components/atoms/BarChart/styles";
 
 // Molecules
 @import "../components/molecules/Accordion/styles";