fix (elements): fix some mistakes mentioned in review

add testFn for onClick and fix Story format (button.stories.tsx),changed color to variant and added special extension (button.props.ts), add button.classes.ts for styles and getClassname function, {...props} (button.tsx)

src/components/Button/button.classes.ts

@@ -0,0 +1,8 @@
+export const baseStyles: string = 'px-4 py-2 font-headline-small rounded';
+export const filledStyles: string = 'bg-color-red text-white w-full max-w-lg h-14 p-4 rounded-2xl gap-4';
+export const borderedStyles: string = 'font-title-large text-white border-color-grey rounded-2xl w-44 h-16 p-4 gap-16 border-2';
+
+export const getClassName = (variant: 'filled' | 'bordered', disabled:boolean) => {
+const buttonStyles = variant === 'filled' ? filledStyles : borderedStyles;
+return `${baseStyles} ${buttonStyles} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`;
+}

src/components/Button/button.props.ts

@@ -1,5 +1,5 @@
-export interface ButtonProps {
+export default interface Props extends React.HTMLAttributes<HTMLButtonElement> {
     label:string;
     disabled?:boolean;
-    color?: 'filled' | 'bordered';
+    variant?: 'filled' | 'bordered';
 }

src/components/Button/button.stories.tsx

@@ -1,22 +1,34 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import Button from './button';
+import Props from "./button.props"
 
 export default {
     title: 'Components/Button',
     component: Button,
-} as Meta<typeof Button>;
+    argTypes:{
+        onClick:{action: 'clicked'},
+    },
+} as Meta<Props>;
 
-const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
 
-export const Primary = Template.bind({});
-Primary.args = {
-    label: 'Удалить',
-    color: 'filled',
+const testFn = (message:string) =>{
+    console.log(message);
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-    label: 'Мои Боты',
-    color: 'bordered',
-};
+type Story = StoryObj<Props>;
+
+export const Primary: Story = {
+    args: {
+        label: 'Удалить',
+        variant: 'filled',
+        onClick: () => testFn('Primary Button is clicked'),
+    },
+}
+
+export const Secondary : Story = {
+    args: {
+        label: 'Мои Боты',
+        variant: 'bordered',
+        onClick: () => testFn('Primary Button is clicked'),
+    },
+}

src/components/Button/button.tsx

@@ -1,21 +1,19 @@
 import React from 'react';
-import { ButtonProps } from './button.props';
+import Props from './button.props';
 import '../Text/index'
-const Button: React.FC<ButtonProps> = ({ label, disabled = false, color = 'primary' }) => {
-    const baseStyles = 'px-4 py-2 font-headline-small rounded';
-    const filledStyles = 'bg-color-red text-white w-full max-w-lg h-14 p-4 rounded-2xl gap-4';
-    const borderedStyles = 'font-title-large text-white border-color-grey rounded-2xl w-44 h-16 p-4 gap-16 border-2';
-
-    const buttonStyles = color === 'filled' ? filledStyles : borderedStyles;
+import {getClassName}   from "./button.classes";
 
+const Button: React.FC<Props> = ({ label, disabled = false, variant = 'filled', className = '', ...props }) => {
     return (
         <button
-            className={`${baseStyles} ${buttonStyles} ${disabled}`}
+            className={`${getClassName(variant, disabled)} ${className}`}
             disabled={disabled}
+            {...props}
         >
             {label}
         </button>
     );
 };
 
-export default Button;
+export default Button;
+