update button variant call

web/src/assets/svg/index.ts

@@ -1,3 +1 @@
-export * from './BusterLogoWithText';
-export * from './BusterFrameLogoWithText';
 export * from './Status_NotRequested';

web/src/components/ui/buttons/Button.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof Button> = {
     children: 'Button'
   },
   argTypes: {
-    buttonType: {
+    variant: {
       control: 'select',
       options: ['default', 'black', 'primary', 'ghost', 'link', 'danger', 'warning', 'success']
     },
@@ -69,35 +69,35 @@ type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
   args: {
-    buttonType: 'default',
+    variant: 'default',
     size: 'default'
   }
 };
 
 export const Black: Story = {
   args: {
-    buttonType: 'black',
+    variant: 'black',
     size: 'default'
   }
 };
 
 export const Primary: Story = {
   args: {
-    buttonType: 'primary',
+    variant: 'primary',
     size: 'default'
   }
 };
 
 export const Tall: Story = {
   args: {
-    buttonType: 'default',
+    variant: 'default',
     size: 'tall'
   }
 };
 
 export const Disabled: Story = {
   args: {
-    buttonType: 'default',
+    variant: 'default',
     size: 'default',
     disabled: true
   }
@@ -112,7 +112,7 @@ export const AsChild: Story = {
 
 export const Loading: Story = {
   args: {
-    buttonType: 'default',
+    variant: 'default',
     size: 'default',
     loading: true
   }
@@ -120,35 +120,35 @@ export const Loading: Story = {
 
 export const WithBorder: Story = {
   args: {
-    buttonType: 'default',
+    variant: 'default',
     size: 'default'
   }
 };
 
 export const Ghost: Story = {
   args: {
-    buttonType: 'ghost',
+    variant: 'ghost',
     size: 'default'
   }
 };
 
 export const Link: Story = {
   args: {
-    buttonType: 'link',
+    variant: 'link',
     size: 'default'
   }
 };
 
 export const Small: Story = {
   args: {
-    buttonType: 'default',
+    variant: 'default',
     size: 'small'
   }
 };
 
 export const IconButton: Story = {
   args: {
-    buttonType: 'default',
+    variant: 'default',
     size: 'default',
     prefix: 'ShapeSquare',
     children: ''
@@ -157,7 +157,7 @@ export const IconButton: Story = {
 
 export const Block: Story = {
   args: {
-    buttonType: 'primary',
+    variant: 'primary',
     size: 'default',
     block: true,
     children: 'Full Width Button'

web/src/components/ui/buttons/ButtonDropdown.tsx

@@ -20,7 +20,7 @@ interface ButtonDropdownProps {
   disabled?: boolean;
   rounding?: ButtonProps['rounding'];
   size?: ButtonProps['size'];
-  buttonType?: ButtonProps['buttonType'];
+  variant?: ButtonProps['variant'];
   loading?: boolean;
   className?: string;
   iconClassName?: string;
@@ -41,13 +41,13 @@ const dropdownButtonVariants = cva('flex items-center pr-0', {
 
 const primaryButtonVariants = cva('', {
   variants: {
-    buttonType: buttonTypeClasses
+    variant: buttonTypeClasses
   }
 });
 
 const splitButtonVariants = cva('flex w-full items-center justify-center h-full px-[5px]', {
   variants: {
-    buttonType: buttonTypeClasses
+    variant: buttonTypeClasses
   }
 });
 
@@ -78,7 +78,7 @@ export const ButtonSplit = React.memo(
     (
       {
         className,
-        buttonType = 'default',
+        variant = 'default',
         size = 'default',
         icon,
         buttonText,
@@ -100,7 +100,7 @@ export const ButtonSplit = React.memo(
         <div
           ref={ref}
           className={cn(
-            buttonVariants({ buttonType, size, rounding: 'none' }),
+            buttonVariants({ variant, size, rounding: 'none' }),
             dropdownButtonVariants({ rounding }),
             'gap-0 !bg-transparent p-0',
             disabled && 'cursor-not-allowed opacity-70',
@@ -108,19 +108,15 @@ export const ButtonSplit = React.memo(
           )}>
           <div
             className={cn(
-              primaryButtonVariants({ buttonType }),
+              primaryButtonVariants({ variant }),
               'flex h-full items-center gap-0.5 border-none pr-2 pl-2.5'
             )}>
             {loading ? (
-              <LoadingIcon buttonType={buttonType} size={size} />
+              <LoadingIcon variant={variant} size={size} />
             ) : (
               icon && (
                 <span
-                  className={cn(
+                  className={cn(buttonIconVariants({ variant, size }), 'text-sm', iconClassName)}>
-                    buttonIconVariants({ buttonType, size }),
-                    'text-sm',
-                    iconClassName
-                  )}>
                   {icon}
                 </span>
               )
@@ -130,7 +126,7 @@ export const ButtonSplit = React.memo(
           <div className="bg-border mr-0 h-full w-[0.5px]" />
           <div className="flex h-full items-center justify-center text-sm" onClick={handleClick}>
             <div
-              className={cn(splitButtonVariants({ buttonType }), 'border-none')}
+              className={cn(splitButtonVariants({ variant }), 'border-none')}
               aria-label="Open dropdown menu">
               <span
                 className={cn(
@@ -149,7 +145,7 @@ export const ButtonSplit = React.memo(
   (prevProps, nextProps) => {
     return (
       prevProps.className === nextProps.className &&
-      prevProps.buttonType === nextProps.buttonType &&
+      prevProps.variant === nextProps.variant &&
       prevProps.size === nextProps.size &&
       prevProps.icon === nextProps.icon &&
       prevProps.buttonText === nextProps.buttonText &&