@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,123 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Button } from './Button';
+import React from 'react';
+
+expect.extend(toHaveNoViolations);
+
+// Mock AtomixGlass component
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
+}));
+
+describe('Button Component', () => {
+  it('renders correctly with label', () => {
+    render(<Button label="Click Me" />);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('renders correctly with children', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('handles onClick event', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click Me</Button>);
+    fireEvent.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire onClick when disabled', () => {
+    const handleClick = vi.fn();
+    render(
+      <Button disabled onClick={handleClick}>
+        Click Me
+      </Button>
+    );
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    fireEvent.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('renders loading state correctly', () => {
+    render(<Button loading>Submit</Button>);
+    const button = screen.getByRole('button');
+    // It should be disabled or aria-disabled
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    // Check for spinner (implementation detail: spinner usually has specific class or role)
+    // Based on Button.tsx: <span className="...spinner...">...</span>
+    // Let's look for the spinner component or class if we can't find by role
+    // Or check if text is still there.
+    expect(screen.getByText('Submit')).toBeInTheDocument();
+  });
+
+  it('replaces text with loadingText when loading', () => {
+    render(
+      <Button loading loadingText="Processing...">
+        Submit
+      </Button>
+    );
+    expect(screen.queryByText('Submit')).not.toBeInTheDocument();
+    expect(screen.getByText('Processing...')).toBeInTheDocument();
+  });
+
+  it('renders as a link when href is provided', () => {
+    render(<Button href="/home">Home</Button>);
+    const link = screen.getByRole('link', { name: /home/i });
+    expect(link).toHaveAttribute('href', '/home');
+  });
+
+  it('renders as disabled link when disabled and href provided', () => {
+    // Current implementation might be buggy here, let's see
+    render(
+      <Button href="/home" disabled>
+        Home
+      </Button>
+    );
+    const link = screen.queryByRole('link');
+    const button = screen.queryByRole('button');
+
+    // If it renders as button when disabled (which logic suggested), then:
+    if (button) {
+      expect(button).toBeDisabled();
+    } else if (link) {
+      expect(link).toHaveAttribute('aria-disabled', 'true');
+      // Should not navigate
+    }
+  });
+
+  it('forwards ref', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Ref Button</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('handles iconOnly correctly with aria-label', () => {
+    render(<Button iconOnly icon={<span>Icon</span>} aria-label="Icon Button" />);
+    expect(screen.getByLabelText('Icon Button')).toBeInTheDocument();
+  });
+
+  it('does not render [object Object] as aria-label when children is an element', () => {
+    const { container } = render(
+      <Button iconOnly icon={<span>Icon</span>}>
+        <span>Text</span>
+      </Button>
+    );
+    const button = screen.getByRole('button');
+    // aria-label should probably be undefined or empty, or extracted text, but definitely not "[object Object]"
+    expect(button.getAttribute('aria-label')).not.toBe('[object Object]');
+  });
+
+  it('should have no accessibility violations', async () => {
+    const { container } = render(<Button>Accessible Button</Button>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/components/Button/Button.tsx

@@ -1,5 +1,4 @@
 import React, { ElementType, forwardRef, useCallback } from 'react';
-import { useButton } from '../../lib/composables/useButton';
 import { ButtonProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { Spinner } from '../Spinner/Spinner';
@@ -60,29 +59,25 @@ export const Button = React.memo(
       const isDisabled = disabled || loading;
 
       // Determine if we should render as a link
+      // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
+      // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
+      // This is a safe fallback for disabled links.
       const shouldRenderAsLink = Boolean(href && !isDisabled);
 
       // Resolve icon element - support both icon (ReactNode) and iconName (string)
-      const iconElement = iconName ? <Icon name={iconName as PhosphorIconsType} size={iconSize} /> : icon;
-
-      const { generateButtonClass, handleClick } = useButton({
-        variant,
-        size,
-        disabled: isDisabled,
-        rounded,
-        glass,
-        loading,
-        fullWidth,
-        block,
-        active,
-        selected,
-      });
+      const iconElement = iconName ? (
+        <Icon name={iconName as PhosphorIconsType} size={iconSize} />
+      ) : (
+        icon
+      );
 
       const buttonClass = [
         BUTTON.BASE_CLASS,
         ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant),
         size !== 'md' ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : '',
-        iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : '',
+        iconOnly
+          ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT)
+          : '',
         rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'rounded') : '',
         isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'disabled') : '',
         glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'glass') : '',
@@ -144,107 +139,140 @@ export const Button = React.memo(
       // Determine spinner size based on button size
       const spinnerSize = size === 'sm' ? 'sm' : size === 'lg' ? 'md' : 'sm';
 
+      // Safe Aria Label
+      const safeAriaLabel =
+        ariaLabel ||
+        (iconOnly
+          ? typeof label === 'string'
+            ? label
+            : typeof children === 'string'
+              ? children
+              : undefined
+          : undefined);
+
       // Button content with icon positioning
       const buttonContent = (
         <>
           {loading && (
-            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT)} aria-hidden="true">
+            <span
+              className={ThemeNaming.bemClass(
+                THEME_NAMING.BUTTON_PREFIX,
+                THEME_NAMING.SPINNER_ELEMENT
+              )}
+              aria-hidden="true"
+            >
               <Spinner
                 size={spinnerSize}
                 variant={
-                  variant === 'link' || (typeof variant === 'string' && variant.startsWith('outline-'))
+                  variant === 'link' ||
+                  (typeof variant === 'string' && variant.startsWith('outline-'))
                     ? 'primary'
-                    : (variant === 'danger' ? 'error' : (variant as any))
+                    : variant === 'danger'
+                      ? 'error'
+                      : (variant as any)
                 }
               />
             </span>
           )}
           {iconElement && !loading && (
-            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT)} aria-hidden="true">
+            <span
+              className={ThemeNaming.bemClass(
+                THEME_NAMING.BUTTON_PREFIX,
+                THEME_NAMING.ICON_ELEMENT
+              )}
+              aria-hidden="true"
+            >
               {iconElement}
             </span>
           )}
           {!iconOnly && buttonText && (
-            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT)}>{buttonText}</span>
+            <span
+              className={ThemeNaming.bemClass(
+                THEME_NAMING.BUTTON_PREFIX,
+                THEME_NAMING.LABEL_ELEMENT
+              )}
+            >
+              {buttonText}
+            </span>
           )}
         </>
       );
 
       // Button props
       const buttonProps = {
-        ref,
         className: buttonClass,
-        type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
         onClick: handleClickEvent,
         onMouseEnter: onHover ? handleMouseEnter : undefined,
         onFocus: onFocus ? handleFocusEvent : undefined,
         onBlur: onBlur ? handleBlurEvent : undefined,
-        disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
         'aria-disabled': isDisabled,
         'aria-busy': loading,
-        'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
+        'aria-label': safeAriaLabel,
         'aria-describedby': ariaDescribedBy,
         'aria-expanded': ariaExpanded,
         'aria-controls': ariaControls,
-        tabIndex: tabIndex !== undefined ? tabIndex : (isDisabled ? -1 : 0),
+        tabIndex: tabIndex !== undefined ? tabIndex : isDisabled ? -1 : 0,
         style,
         ...props,
       };
 
-      // Default glass props
-      const defaultGlassProps = {
-        displacementScale: 20,
-        blurAmount: 0,
-        saturation: 200,
-        elasticity: 0,
-      };
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      let content: React.ReactElement;
 
       // Render as anchor if href is provided
       if (shouldRenderAsLink) {
-        const { ref: _, ...buttonPropsWithoutRef } = buttonProps;
-        const anchorButtonProps = {
-          ...buttonPropsWithoutRef,
-          type: undefined,
-          disabled: undefined,
-        };
-
         // Use custom LinkComponent if provided (e.g., Next.js Link)
         if (LinkComponent) {
           const LinkComp = LinkComponent as React.ComponentType<any>;
           const linkProps = {
-            ...anchorButtonProps,
-            ref: ref as React.Ref<HTMLAnchorElement>,
+            ...buttonProps,
+            ref: ref as any, // LinkComponent usually forwards ref to anchor
             href,
             target,
             rel: target === '_blank' ? 'noopener noreferrer' : undefined,
           };
 
-          const linkElement = (
-            <LinkComp {...linkProps}>
+          content = <LinkComp {...linkProps}>{buttonContent}</LinkComp>;
+        } else {
+          // Fallback to regular anchor tag
+          content = (
+            <a
+              {...buttonProps}
+              ref={ref as React.Ref<HTMLAnchorElement>}
+              href={href}
+              target={target}
+              rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            >
               {buttonContent}
-            </LinkComp>
+            </a>
           );
-
-          return glass ? <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass> : linkElement;
         }
-
-        // Fallback to regular anchor tag
-        const anchorElement = (
-          <a {...anchorButtonProps} ref={ref as React.Ref<HTMLAnchorElement>} href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
+      } else {
+        // Default button rendering
+        content = (
+          <Component
+            {...buttonProps}
+            ref={ref}
+            type={Component === 'button' ? type : undefined}
+            disabled={isDisabled}
+          >
             {buttonContent}
-          </a>
+          </Component>
         );
-
-        return glass ? <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass> : anchorElement;
       }
 
-      // Default button rendering
-      const buttonElement = (
-        <Component {...buttonProps}>{buttonContent}</Component>
-      );
+      if (glass) {
+        // Default glass props
+        const defaultGlassProps = {
+          displacementScale: 20,
+          blurAmount: 0,
+          saturation: 200,
+          elasticity: 0,
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
+      }
 
-      return glass ? <AtomixGlass {...glassProps}>{buttonElement}</AtomixGlass> : buttonElement;
+      return content;
     }
   )
 );