Button component with color prop , tests and stories updated

src/components/ui/Button/Button.tsx

@@ -11,9 +11,10 @@ export type ButtonProps = {
     customRootClass?: string;
     variant?: string;
     size?:string;
+    color?:string;
 } & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & PropsWithChildren
 
-const Button = ({ children, type = 'button', customRootClass = '', className = '', variant = '', size = '', ...props }: ButtonProps) => {
+const Button = ({ children, type = 'button', customRootClass = '', className = '', variant = '', size = '', color = '', ...props }: ButtonProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     // apply data attribute for accent color
     // apply attribute only if color is present
@@ -27,6 +28,10 @@ const Button = ({ children, type = 'button', customRootClass = '', className = '
         data_attributes['data-button-size'] = size;
     }
 
+    if (color) {
+        data_attributes['data-accent-color'] = color;
+    }
+
     return (
         <ButtonPrimitive
             type={type}

src/components/ui/Button/stories/Button.stories.js

@@ -24,11 +24,11 @@ export default {
                     if (!BUTTON_TEXT) {
                         label = 'Proceed';
                     }
-                    return <Button label={`${label}`} key={index} variant={variant} >
+                    return <Button label={`${label}`} key={index} variant={variant} {...args}>
                         <div>{BUTTON_TEXT} </div> <ArrowIcon className="text-accent-900" />
                     </Button>;
                 })}
-                <Button>
+                <Button {...args}>
                     <div>{!BUTTON_TEXT} </div> <ArrowIcon className="text-white" />
                 </Button>
             </div>
@@ -43,6 +43,12 @@ export const All = {
     }
 };
 
+export const Color =  {
+    args: {
+        color: "yellow"
+    }
+}
+
 export const Size = (args) => {
     return <SandboxEditor>
         <div className='mt-4 mb-2'>

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

@@ -19,7 +19,7 @@ describe('Button', () => {
     test('renders button with the given color', () => {
         render(<Button color='white'>button</Button>);
         const button = screen.getByText('button');
-        expect(button).toHaveAttribute('color', 'white');
+        expect(button).toHaveAttribute('data-accent-color', 'white');
     });
 
     test('renders button with the given variant', () => {