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

package/src/ui/molecules/Accordion/Accordion.test.tsx

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Accordion from './Accordion';
+
+const mockItems = [
+  { id: '1', title: 'Item 1', content: 'Content 1' },
+  { id: '2', title: 'Item 2', content: 'Content 2' },
+  { id: '3', title: 'Item 3', content: 'Content 3', disabled: true },
+];
+
+describe('Accordion', () => {
+  it('renders correctly', () => {
+    render(<Accordion items={mockItems} />);
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('expands item on click (single mode)', () => {
+    render(<Accordion items={mockItems} type="single" />);
+    const button = screen.getByText('Item 1').closest('button');
+    fireEvent.click(button!);
+    expect(screen.getByText('Content 1')).toBeVisible();
+  });
+
+  it('collapses item when clicked again (single mode)', () => {
+    render(<Accordion items={mockItems} type="single" />);
+    const button = screen.getByText('Item 1').closest('button');
+    fireEvent.click(button!);
+    expect(screen.getByText('Content 1')).toBeVisible();
+    fireEvent.click(button!);
+    const contentContainer = document.querySelector('#accordion-content-1');
+    if (contentContainer) {
+      const ariaHidden = contentContainer.getAttribute('aria-hidden');
+      expect(ariaHidden === 'true' || !screen.queryByText('Content 1')?.isConnected).toBe(true);
+    } else {
+      const content = screen.queryByText('Content 1');
+      expect(content).not.toBeVisible();
+    }
+  });
+
+  it('allows multiple items open (multiple mode)', () => {
+    render(<Accordion items={mockItems} type="multiple" />);
+    const button1 = screen.getByText('Item 1').closest('button');
+    const button2 = screen.getByText('Item 2').closest('button');
+    
+    fireEvent.click(button1!);
+    fireEvent.click(button2!);
+    
+    expect(screen.getByText('Content 1')).toBeVisible();
+    expect(screen.getByText('Content 2')).toBeVisible();
+  });
+
+  it('calls onValueChange when item is toggled', () => {
+    const handleChange = vi.fn();
+    render(<Accordion items={mockItems} onValueChange={handleChange} />);
+    const button = screen.getByText('Item 1').closest('button');
+    fireEvent.click(button!);
+    expect(handleChange).toHaveBeenCalledWith('1');
+  });
+
+  it('handles disabled items', () => {
+    render(<Accordion items={mockItems} />);
+    const disabledButton = screen.getByText('Item 3').closest('button');
+    expect(disabledButton).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(disabledButton!);
+    const contentContainer = document.querySelector('#accordion-content-3');
+    if (contentContainer) {
+      const ariaHidden = contentContainer.getAttribute('aria-hidden');
+      expect(ariaHidden === 'true' || !screen.queryByText('Content 3')?.isConnected).toBe(true);
+    } else {
+      const content = screen.queryByText('Content 3');
+      expect(content).not.toBeVisible();
+    }
+  });
+
+  it('opens default items', () => {
+    render(<Accordion items={mockItems} defaultOpen="1" />);
+    expect(screen.getByText('Content 1')).toBeVisible();
+  });
+
+  it('opens multiple default items', () => {
+    render(<Accordion items={mockItems} type="multiple" defaultOpen={['1', '2']} />);
+    expect(screen.getByText('Content 1')).toBeVisible();
+    expect(screen.getByText('Content 2')).toBeVisible();
+  });
+});

package/src/ui/molecules/Accordion/Accordion.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { getColorClass, getHoverColorClass } from '../../tokens/colors';
+import { getSpacingClass } from '../../tokens/spacing';
+import { getAnimationClass } from '../../tokens/animations';
+import { getTypographyClasses } from '../../tokens/typography';
+import { getRadiusClass } from '../../tokens/radius';
+
+export type AccordionType = 'single' | 'multiple';
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  type?: AccordionType;
+  defaultOpen?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  className?: string;
+}
+
+/**
+ * Accordion Component
+ * 
+ * A collapsible content component that can display multiple items.
+ * Supports single and multiple selection modes.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Accordion
+ *   type="single"
+ *   items={[
+ *     { id: '1', title: 'Item 1', content: 'Content 1' },
+ *     { id: '2', title: 'Item 2', content: 'Content 2' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Accordion({
+  items,
+  type = 'single',
+  defaultOpen,
+  onValueChange,
+  className = '',
+}: AccordionProps) {
+  const getInitialOpen = (): string[] => {
+    if (defaultOpen === undefined) return [];
+    return Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
+  };
+
+  const [openItems, setOpenItems] = useState<string[]>(getInitialOpen);
+
+  const handleToggle = (itemId: string) => {
+    if (items.find(item => item.id === itemId)?.disabled) return;
+
+    let newOpenItems: string[];
+
+    if (type === 'single') {
+      newOpenItems = openItems.includes(itemId) ? [] : [itemId];
+    } else {
+      newOpenItems = openItems.includes(itemId)
+        ? openItems.filter(id => id !== itemId)
+        : [...openItems, itemId];
+    }
+
+    setOpenItems(newOpenItems);
+    onValueChange?.(type === 'single' ? newOpenItems[0] || '' : newOpenItems);
+  };
+
+  return (
+    <div className={`${getSpacingClass('xs', 'space-y')} ${className}`}>
+      {items.map((item) => {
+        const isOpen = openItems.includes(item.id);
+        const isDisabled = item.disabled;
+
+        return (
+          <div
+            key={item.id}
+            className={`border ${getColorClass('neutral', 'DEFAULT', 'border')} ${getRadiusClass('md')} overflow-hidden`}
+          >
+            <button
+              type="button"
+              onClick={() => handleToggle(item.id)}
+              disabled={isDisabled}
+              className={`
+                w-full
+                flex
+                items-center
+                justify-between
+                ${getSpacingClass('base', 'px')}
+                ${getSpacingClass('md', 'py')}
+                ${getTypographyClasses('label')}
+                text-left
+                ${getColorClass('neutral', 'dark', 'text')}
+                bg-white
+                ${getHoverColorClass('neutral', 'light', 'bg')}
+                focus:outline-none
+                focus:ring-2
+                focus:ring-offset-2
+                ${(() => {
+                  const primaryBg = getColorClass('primary', 'DEFAULT', 'bg');
+                  const parts = primaryBg.split('-');
+                  return parts.length >= 3 ? `focus:ring-${parts[1]}-${parts[2]}` : 'focus:ring-indigo-500';
+                })()}
+                ${getAnimationClass('base')}
+                ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+              `}
+              aria-expanded={isOpen}
+              aria-controls={`accordion-content-${item.id}`}
+              aria-disabled={isDisabled}
+            >
+              <span>{item.title}</span>
+              <ChevronDown
+                className={`
+                  ${getSpacingClass('sm', 'ml')}
+                  ${getAnimationClass('base')}
+                  ${isOpen ? 'transform rotate-180' : ''}
+                  ${isDisabled ? 'opacity-50' : ''}
+                `}
+                aria-hidden="true"
+              />
+            </button>
+            <div
+              id={`accordion-content-${item.id}`}
+              className={`
+                overflow-hidden
+                ${getAnimationClass('base')}
+                ${isOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'}
+              `}
+              aria-hidden={!isOpen}
+            >
+              <div className={`
+                ${getSpacingClass('base', 'px')}
+                ${getSpacingClass('md', 'py')}
+                ${getColorClass('neutral', 'DEFAULT', 'text')}
+              `}>
+                {item.content}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/molecules/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Accordion';
+export type { AccordionProps, AccordionItem, AccordionType } from './Accordion';