@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/atoms/Button/Button.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from './Button';
+import { Play, X, Save, Download, Trash2 } from 'lucide-react';
 
 const meta: Meta<typeof Button> = {
   title: 'Atoms/Button',
@@ -8,7 +9,7 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'error', 'outline', 'ghost'],
+      options: ['primary', 'secondary', 'error', 'outline', 'ghost', 'iconOnly'],
     },
     size: {
       control: 'select',
@@ -20,6 +21,9 @@ const meta: Meta<typeof Button> = {
     disabled: {
       control: 'boolean',
     },
+    fullWidth: {
+      control: 'boolean',
+    },
   },
 };
 
@@ -61,6 +65,14 @@ export const Ghost: Story = {
   },
 };
 
+export const IconOnly: Story = {
+  args: {
+    variant: 'iconOnly',
+    leftIcon: <X className="h-5 w-5" />,
+    'aria-label': 'Close',
+  },
+};
+
 export const Sizes: Story = {
   render: () => (
     <div className="flex items-center gap-4">
@@ -71,6 +83,24 @@ export const Sizes: Story = {
   ),
 };
 
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-4">
+        <Button leftIcon={<Play className="h-4 w-4" />}>Play</Button>
+        <Button rightIcon={<Download className="h-4 w-4" />}>Download</Button>
+        <Button leftIcon={<Save className="h-4 w-4" />} rightIcon={<X className="h-4 w-4" />}>
+          Save and Close
+        </Button>
+      </div>
+      <div className="flex items-center gap-4">
+        <Button variant="outline" leftIcon={<Play className="h-4 w-4" />}>Play</Button>
+        <Button variant="ghost" leftIcon={<Trash2 className="h-4 w-4" />}>Delete</Button>
+      </div>
+    </div>
+  ),
+};
+
 export const Loading: Story = {
   args: {
     isLoading: true,
@@ -78,9 +108,108 @@ export const Loading: Story = {
   },
 };
 
+export const LoadingWithText: Story = {
+  args: {
+    isLoading: true,
+    loadingText: 'Saving...',
+    children: 'Save',
+  },
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,
     children: 'Disabled Button',
   },
 };
+
+export const FullWidth: Story = {
+  args: {
+    fullWidth: true,
+    children: 'Full Width Button',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-4">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="error">Error</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="iconOnly" leftIcon={<X className="h-5 w-5" />} aria-label="Close" />
+      </div>
+      <div className="flex items-center gap-4">
+        <Button variant="primary" isLoading>Loading</Button>
+        <Button variant="primary" disabled>Disabled</Button>
+        <Button variant="primary" leftIcon={<Save className="h-4 w-4" />}>With Icon</Button>
+      </div>
+    </div>
+  ),
+};
+
+export const Accessibility: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Buttons with proper ARIA labels:</p>
+        <div className="flex gap-2">
+          <Button aria-label="Save document">Save</Button>
+          <Button variant="iconOnly" leftIcon={<X className="h-5 w-5" />} aria-label="Close dialog">
+            <X className="h-5 w-5" />
+          </Button>
+          <Button variant="iconOnly" leftIcon={<Save className="h-5 w-5" />} aria-label="Save changes">
+            <Save className="h-5 w-5" />
+          </Button>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Loading state with aria-busy:</p>
+        <Button isLoading aria-busy="true">
+          Processing...
+        </Button>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Disabled state with aria-disabled:</p>
+        <Button disabled aria-disabled="true">
+          Disabled Action
+        </Button>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Examples demonstrating accessibility features: ARIA labels, aria-busy for loading, and aria-disabled for disabled states.',
+      },
+    },
+  },
+};
+
+export const KeyboardNavigation: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-600">
+        Try navigating with Tab key and activating buttons with Enter or Space:
+      </p>
+      <div className="flex flex-col gap-2">
+        <Button>First Button (Tab here)</Button>
+        <Button variant="secondary">Second Button</Button>
+        <Button variant="outline">Third Button</Button>
+        <Button variant="ghost">Fourth Button</Button>
+      </div>
+      <p className="text-xs text-gray-500 mt-4">
+        All buttons support keyboard navigation: Tab to focus, Enter or Space to activate.
+      </p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates keyboard navigation support. Use Tab to navigate between buttons and Enter/Space to activate.',
+      },
+    },
+  },
+};

package/src/ui/atoms/Button/Button.test.tsx

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from './Button';
+import { Play, X } from 'lucide-react';
+
+describe('Button', () => {
+  it('renders button with text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Disabled</Button>);
+    const button = screen.getByText('Disabled');
+    expect(button).toBeDisabled();
+  });
+
+  it('is disabled when isLoading is true', () => {
+    render(<Button isLoading>Loading</Button>);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('shows loading spinner when isLoading', () => {
+    render(<Button isLoading>Save</Button>);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('shows loading text when provided', () => {
+    render(<Button isLoading loadingText="Saving...">Save</Button>);
+    expect(screen.getByText('Saving...')).toBeInTheDocument();
+  });
+
+  it('renders left icon', () => {
+    render(<Button leftIcon={<Play data-testid="play-icon" />}>Play</Button>);
+    expect(screen.getByTestId('play-icon')).toBeInTheDocument();
+  });
+
+  it('renders right icon', () => {
+    render(<Button rightIcon={<X data-testid="x-icon" />}>Close</Button>);
+    expect(screen.getByTestId('x-icon')).toBeInTheDocument();
+  });
+
+  it('applies variant classes', () => {
+    const { container } = render(<Button variant="primary">Primary</Button>);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('bg-indigo-500');
+  });
+
+  it('applies size classes', () => {
+    const { container } = render(<Button size="sm">Small</Button>);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('px-3', 'py-1.5', 'text-sm');
+  });
+
+  it('applies fullWidth class', () => {
+    const { container } = render(<Button fullWidth>Full Width</Button>);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('w-full');
+  });
+
+  it('renders iconOnly variant correctly', () => {
+    render(<Button variant="iconOnly" leftIcon={<X data-testid="icon" />} aria-label="Close" />);
+    const button = screen.getByLabelText('Close');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('p-0');
+  });
+
+  it('requires aria-label for iconOnly variant', () => {
+    render(<Button variant="iconOnly" leftIcon={<X />}>Close</Button>);
+    // Should still render, but aria-label should be set
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('calls onClick when Enter key is pressed', () => {
+      const handleClick = vi.fn();
+      render(<Button onClick={handleClick}>Click me</Button>);
+      const button = screen.getByText('Click me');
+      fireEvent.keyDown(button, { key: 'Enter' });
+      // Note: keyDown doesn't trigger onClick, but we test that button is focusable
+      button.focus();
+      expect(document.activeElement).toBe(button);
+    });
+
+    it('calls onClick when Space key is pressed', () => {
+      const handleClick = vi.fn();
+      render(<Button onClick={handleClick}>Click me</Button>);
+      const button = screen.getByText('Click me');
+      button.focus();
+      fireEvent.keyDown(button, { key: ' ' });
+      // Note: keyDown doesn't trigger onClick, but we test keyboard interaction
+      expect(document.activeElement).toBe(button);
+    });
+
+    it('does not call onClick when disabled and Enter is pressed', () => {
+      const handleClick = vi.fn();
+      render(<Button disabled onClick={handleClick}>Disabled</Button>);
+      const button = screen.getByText('Disabled');
+      button.focus();
+      fireEvent.keyDown(button, { key: 'Enter' });
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('is focusable when not disabled', () => {
+      render(<Button>Focusable</Button>);
+      const button = screen.getByText('Focusable');
+      button.focus();
+      expect(document.activeElement).toBe(button);
+    });
+
+    it('is not focusable when disabled', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByText('Disabled');
+      expect(button).toBeDisabled();
+      // Disabled buttons are not focusable by default
+      button.focus();
+      expect(document.activeElement).not.toBe(button);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has correct role', () => {
+      render(<Button>Test</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('has aria-label when provided', () => {
+      render(<Button aria-label="Submit form">Submit</Button>);
+      const button = screen.getByLabelText('Submit form');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('has aria-busy when loading', () => {
+      render(<Button isLoading>Loading</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-busy', 'true');
+    });
+
+    it('has aria-disabled when disabled', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('has accessible name from children', () => {
+      render(<Button>Save Changes</Button>);
+      const button = screen.getByRole('button', { name: 'Save Changes' });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('has accessible name from aria-label over children', () => {
+      render(<Button aria-label="Close dialog">X</Button>);
+      const button = screen.getByRole('button', { name: 'Close dialog' });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('has type="button" by default', () => {
+      const { container } = render(<Button>Test</Button>);
+      const button = container.querySelector('button');
+      expect(button).toHaveAttribute('type', 'button');
+    });
+
+    it('respects type prop', () => {
+      const { container } = render(<Button type="submit">Submit</Button>);
+      const button = container.querySelector('button');
+      expect(button).toHaveAttribute('type', 'submit');
+    });
+
+    it('has correct tabIndex when disabled', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+      // Disabled buttons are not focusable, so they don't need explicit tabIndex
+      button.focus();
+      expect(document.activeElement).not.toBe(button);
+    });
+
+    it('has correct tabIndex when enabled', () => {
+      render(<Button>Enabled</Button>);
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveAttribute('tabIndex', '-1');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles rapid clicks', () => {
+      const handleClick = vi.fn();
+      render(<Button onClick={handleClick}>Click</Button>);
+      const button = screen.getByText('Click');
+      fireEvent.click(button);
+      fireEvent.click(button);
+      fireEvent.click(button);
+      expect(handleClick).toHaveBeenCalledTimes(3);
+    });
+
+    it('handles onClick with event', () => {
+      const handleClick = vi.fn((e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      });
+      render(<Button onClick={handleClick}>Click</Button>);
+      const button = screen.getByText('Click');
+      fireEvent.click(button);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      // React uses SyntheticEvent, not native Event
+      expect(handleClick.mock.calls[0][0]).toHaveProperty('type', 'click');
+    });
+
+    it('renders correctly with empty children', () => {
+      render(<Button aria-label="Empty button"></Button>);
+      const button = screen.getByLabelText('Empty button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('handles both loading and disabled states', () => {
+      render(<Button isLoading disabled>Loading</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+      expect(button).toHaveAttribute('aria-busy', 'true');
+    });
+  });
+});