Progress bar color prop with docs, test and sb

docs/app/docs/components/progress/page.js

@@ -9,7 +9,18 @@ export const metadata = SEO.getMetadata(PAGE_NAME)
 
 import codeUsage from "./docs/codeUsage"
 
-const AvatarDocs = () => {
+const ProgressDocs = () => {
+    const columns = [
+        {name: 'Prop', id: 'prop'},
+        {name: 'Type', id: 'type'},
+        {name: 'Default', id: 'default'},
+        {name: 'Description', id: 'description'},
+    ];
+
+    const data = [
+        {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the progress bar', id: 'color'},
+    ];
+
     return <div>
         <Documentation currentPage={PAGE_NAME} title='Progress' description={`
             Progress component is used to show the progress of a task. It can be used to show the progress of a file upload, a download, a form submission, or any other task that requires progress to be shown.
@@ -22,8 +33,12 @@ const AvatarDocs = () => {
                 </Card>
             </Documentation.ComponentHero>
 
+            <div className="max-w-screen-md">
+                <Documentation.Table columns={columns} data={data} />
+            </div>
+
         </Documentation>
     </div>
 }
 
-export default AvatarDocs;
+export default ProgressDocs;

src/components/ui/Progress/Progress.tsx

@@ -9,14 +9,15 @@ export interface ProgressProps {
     value: number;
     minValue?: number,
     maxValue?: number;
+    color?: string;
     customRootClass?: string
     renderLabel?(value: number): JSX.Element
   }
 
-function Progress({ value = 0, maxValue = 100, minValue = 0, customRootClass, ...indicatorProps }: ProgressProps) {
+function Progress({ value = 0, maxValue = 100, minValue = 0, customRootClass, color='', ...indicatorProps }: ProgressProps) {
     return (
-        <ProgressRoot value={value} maxValue={maxValue} minValue={minValue} customRootClass={customRootClass}>
-            <ProgressIndicator customRootClass={customRootClass} {...indicatorProps}/>
+        <ProgressRoot value={value} maxValue={maxValue} minValue={minValue} customRootClass={customRootClass} >
+            <ProgressIndicator customRootClass={customRootClass} {...indicatorProps} color={color}/>
         </ProgressRoot>
     );
 }

src/components/ui/Progress/fragments/ProgressIndicator.tsx

@@ -7,18 +7,26 @@ import { ProgressContext } from '../contexts/ProgressContext';
 
 interface IndicatorProps {
     customRootClass?: string;
+    color?:string;
     renderLabel?(value: number): JSX.Element;
 }
 
 export default function ProgressIndicator({
     customRootClass,
-    renderLabel
+    renderLabel, 
+    color=''
 }: IndicatorProps) {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     const { value, minValue, maxValue } = useContext(ProgressContext);
     // Ensure value stays within bounds in production
     const boundedValue = Math.min(Math.max(value, minValue), maxValue);
 
+    const data_attributes: Record<string, string> = {};
+
+    if (color) {
+        data_attributes['data-accent-color'] = color;
+    }
+
     return (
         <div
             role="progressbar"
@@ -27,6 +35,7 @@ export default function ProgressIndicator({
             aria-valuenow={boundedValue}
             aria-valuemax={maxValue}
             aria-valuemin={minValue}
+            {...data_attributes}
         >
             {renderLabel?.(value)}
         </div>

src/components/ui/Progress/stories/Progress.stories.js

@@ -12,8 +12,8 @@ export default {
         console.log(value);
         return (<SandboxEditor>
             <div className='my-10 space-y-4'>
-                <Progress value={value} maxValue={100} minValue={0} />
-                <Button
+                <Progress value={value} maxValue={100} minValue={0} {...args}/>
+                <Button {...args}
                     onClick={() => {
                         // randomize value
                         setValue(Math.floor(Math.random() * 100));
@@ -29,3 +29,9 @@ export const All = {
         label: 'progress label'
     }
 };
+
+export const Color = {
+    args: {
+        color:'green'
+    }
+}

src/components/ui/Progress/tests/Progress.test.tsx

@@ -29,4 +29,10 @@ describe('Progress', () => {
         rerender(<Progress value={2} minValue={0} maxValue={100} />);
         expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '2');
     });
+
+
+    test('renders progress bar with correct color', () => {
+        render(<Progress value={2} color='blue' />);
+        expect(screen.getByRole('progressbar')).toHaveAttribute('data-accent-color', 'blue');
+    });
 });