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

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

@@ -1,17 +1,24 @@
 'use client';
 
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import type { ButtonHTMLAttributes, ReactNode, ElementType } from 'react';
 import { getColorClass } from '../../tokens/colors';
+import Spinner from '../Spinner/Spinner';
 
-export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost';
+export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost' | 'iconOnly';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'> {
   variant?: ButtonVariant;
   size?: ButtonSize;
   isLoading?: boolean;
+  loadingText?: string;
+  loadingIcon?: ReactNode;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
+  fullWidth?: boolean;
+  as?: ElementType;
+  href?: string;
 }
 
 /**
@@ -40,58 +47,95 @@ class ButtonClassBuilder {
 
   addVariant(variant: ButtonVariant): this {
     // Map 'regular' to 'primary' for backward compatibility
+    // TODO: Remove 'regular' in next major version
     const normalizedVariant = variant === 'regular' ? 'primary' : variant;
     
-    const variantClasses: Record<'primary' | 'secondary' | 'error' | 'outline' | 'ghost', string[]> = {
+     
+    if (variant === 'regular' && process.env.NODE_ENV === 'development') {
+      console.warn(
+        'Button variant "regular" is deprecated. Use "primary" instead. ' +
+        'This mapping will be removed in the next major version.'
+      );
+    }
+    
+    type NormalizedVariant = Exclude<ButtonVariant, 'regular'>;
+    
+    const variantClasses: Record<NormalizedVariant, string[]> = {
       primary: [
         getColorClass('primary', 'DEFAULT', 'bg'),
-        getColorClass('primary', 'DEFAULT', 'text'),
+        'text-white',
         'hover:opacity-90',
         'focus:ring-indigo-500',
       ],
       secondary: [
         getColorClass('secondary', 'DEFAULT', 'bg'),
-        getColorClass('secondary', 'DEFAULT', 'text'),
+        'text-white',
         'hover:opacity-90',
         'focus:ring-violet-500',
       ],
       error: [
         getColorClass('error', 'DEFAULT', 'bg'),
-        getColorClass('error', 'DEFAULT', 'text'),
+        'text-white',
         'hover:opacity-90',
         'focus:ring-red-500',
       ],
       outline: [
         'border-2',
-        'border-gray-300',
+        getColorClass('neutral', 'DEFAULT', 'border'),
         'bg-transparent',
-        'text-gray-700',
+        getColorClass('neutral', 'dark', 'text'),
         'hover:bg-gray-50',
         'focus:ring-gray-500',
       ],
       ghost: [
         'bg-transparent',
-        'text-gray-700',
+        getColorClass('neutral', 'dark', 'text'),
         'hover:bg-gray-100',
         'focus:ring-gray-500',
       ],
+      iconOnly: [
+        'bg-transparent',
+        getColorClass('neutral', 'dark', 'text'),
+        'hover:bg-gray-100',
+        'focus:ring-gray-500',
+        'p-0',
+      ],
     };
 
-    this.classes.push(...variantClasses[normalizedVariant]);
+    this.classes.push(...variantClasses[normalizedVariant as NormalizedVariant]);
     return this;
   }
 
-  addSize(size: ButtonSize): this {
+  addSize(size: ButtonSize, variant: ButtonVariant): this {
+    // Normalize variant for size calculation
+    const normalizedVariant = variant === 'regular' ? 'primary' : variant;
+    
+    // IconOnly variant has different sizing
+    if (normalizedVariant === 'iconOnly') {
+      const iconSizeClasses: Record<ButtonSize, string[]> = {
+        sm: ['h-8', 'w-8', 'p-0'],
+        md: ['h-10', 'w-10', 'p-0'],
+        lg: ['h-12', 'w-12', 'p-0'],
+      };
+      this.classes.push(...iconSizeClasses[size]);
+      return this;
+    }
+
     const sizeClasses: Record<ButtonSize, string[]> = {
-      sm: ['px-3', 'py-1.5', 'text-sm'],
-      md: ['px-4', 'py-2', 'text-base'],
-      lg: ['px-6', 'py-3', 'text-lg'],
+      sm: ['px-3', 'py-1.5', 'text-sm', 'gap-1.5'],
+      md: ['px-4', 'py-2', 'text-base', 'gap-2'],
+      lg: ['px-6', 'py-3', 'text-lg', 'gap-2.5'],
     };
 
     this.classes.push(...sizeClasses[size]);
     return this;
   }
 
+  addFullWidth(): this {
+    this.classes.push('w-full');
+    return this;
+  }
+
   addCustom(className: string): this {
     if (className) {
       this.classes.push(className);
@@ -104,80 +148,143 @@ class ButtonClassBuilder {
   }
 }
 
+/**
+ * Icon Wrapper Component
+ * Handles icon spacing and alignment consistently
+ */
+function IconWrapper({ 
+  children, 
+  position 
+}: { 
+  children: ReactNode; 
+  position: 'left' | 'right';
+}) {
+  if (!children) return null;
+  
+  return (
+    <span className={`inline-flex items-center ${position === 'left' ? 'mr-0' : 'ml-0'}`}>
+      {children}
+    </span>
+  );
+}
+
 /**
  * Button Component
  * 
- * A styled button component with variants and sizes.
+ * A styled button component with variants, sizes, and loading states.
  * Follows Atomic Design principles as an Atom component.
  * Uses Builder Pattern for class construction.
+ * Supports polymorphic `as` prop for rendering as different elements (Link, NextLink, etc.).
  * 
  * @example
  * ```tsx
- * <Button 
- *   variant="primary"
- *   size="md"
- *   onClick={handleClick}
- * >
+ * // Basic usage
+ * <Button variant="primary" size="md" onClick={handleClick}>
  *   Click me
  * </Button>
+ * 
+ * // With icons
+ * <Button leftIcon={<Icon />} rightIcon={<Icon />}>
+ *   Action
+ * </Button>
+ * 
+ * // Loading state
+ * <Button isLoading loadingText="Saving...">
+ *   Save
+ * </Button>
+ * 
+ * // As Link
+ * <Button as={Link} href="/page">
+ *   Navigate
+ * </Button>
+ * 
+ * // Icon only
+ * <Button variant="iconOnly" leftIcon={<Icon />} aria-label="Close" />
  * ```
  */
-export default function Button({
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
   variant = 'primary',
   size = 'md',
   isLoading = false,
+  loadingText,
+  loadingIcon,
   leftIcon,
   rightIcon,
+  fullWidth = false,
+  as: Component = 'button',
   className = '',
   disabled = false,
   children,
+  'aria-label': ariaLabel,
   ...props
-}: ButtonProps) {
+}, ref) {
   const builder = new ButtonClassBuilder();
   const classes = builder
     .addBase()
     .addVariant(variant)
-    .addSize(size)
+    .addSize(size, variant)
+    .addFullWidth(fullWidth)
     .addCustom(className)
     .build();
 
+  // Determine if button is icon-only (no children, only icons)
+  const isIconOnly = variant === 'iconOnly' || (!children && (leftIcon || rightIcon));
+  
+  // Aria label is required for icon-only buttons
+  const finalAriaLabel = isIconOnly && !ariaLabel && !children
+    ? 'Button' // Fallback, but should be provided
+    : ariaLabel;
+
+  // Normalize variant for spinner
+  const normalizedVariant = variant === 'regular' ? 'primary' : variant;
+  
+  // Determine spinner variant based on button variant
+  const getSpinnerVariant = (): 'primary' | 'secondary' | 'neutral' => {
+    if (normalizedVariant === 'error') return 'primary'; // Red buttons use primary spinner (white)
+    if (normalizedVariant === 'primary' || normalizedVariant === 'secondary') return 'neutral'; // Colored buttons use neutral spinner
+    return 'primary'; // Default
+  };
+  
+  // Loading state
+  const displayLoadingIcon = loadingIcon || (
+    <Spinner 
+      size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'} 
+      variant={getSpinnerVariant()}
+    />
+  );
+
+  const buttonProps = {
+    className: classes,
+    disabled: disabled || isLoading,
+    'aria-busy': isLoading,
+    'aria-label': finalAriaLabel,
+    'aria-disabled': disabled || isLoading,
+    ...(Component === 'button' ? { type: 'button' as const } : {}),
+    ...props,
+  };
+
   return (
-    <button
-      className={classes}
-      disabled={disabled || isLoading}
-      {...props}
+    <Component
+      ref={ref}
+      {...buttonProps}
     >
       {isLoading ? (
         <>
-          <svg
-            className="animate-spin -ml-1 mr-2 h-4 w-4"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-          Loading...
+          {displayLoadingIcon}
+          {loadingText && <span className="ml-2">{loadingText}</span>}
+          {!loadingText && children && <span className="ml-2 opacity-0">{children}</span>}
         </>
       ) : (
         <>
-          {leftIcon && <span className="mr-2">{leftIcon}</span>}
+          {leftIcon && <IconWrapper position="left">{leftIcon}</IconWrapper>}
           {children}
-          {rightIcon && <span className="ml-2">{rightIcon}</span>}
+          {rightIcon && <IconWrapper position="right">{rightIcon}</IconWrapper>}
         </>
       )}
-    </button>
+    </Component>
   );
-}
+});
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/ui/atoms/Checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useRef, useEffect } from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import { getTypographyClasses } from '../../tokens/typography';
 
@@ -7,6 +8,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
   label?: ReactNode;
   error?: boolean;
   helperText?: string;
+  indeterminate?: boolean;
 }
 
 /**
@@ -33,6 +35,7 @@ export default function Checkbox({
   helperText,
   className = '',
   disabled = false,
+  indeterminate = false,
   ...props
 }: CheckboxProps) {
   const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
@@ -68,12 +71,22 @@ export default function Checkbox({
     disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
   ].filter(Boolean).join(' ');
 
+  // Set indeterminate state via ref
+  const checkboxRef = useRef<HTMLInputElement>(null);
+  
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
   return (
     <div className={`flex flex-col my-2 ${className}`}>
       <div className="flex items-center">
         <input
           type="checkbox"
           id={checkboxId}
+          ref={checkboxRef}
           className={checkboxClasses}
           disabled={disabled}
           aria-invalid={error}
@@ -95,7 +108,7 @@ export default function Checkbox({
           className={`mt-1 ${getTypographyClasses('caption')} ${error ? 'text-red-600' : 'text-gray-500'}`}
           role={error ? 'alert' : undefined}
         >
-          {error || helperText}
+          {helperText || (error ? 'Error' : '')}
         </div>
       )}
     </div>

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

@@ -4,7 +4,7 @@ import Collapsible from "./Collapsible";
 import { Button, Text } from "../../atoms";
 
 const meta: Meta<typeof Collapsible> = {
-  title: "UI/Atoms/Collapsible",
+  title: "Atoms/Collapsible",
   component: Collapsible,
   parameters: {
     docs: {
@@ -121,4 +121,50 @@ export const Disabled: StoryObj<typeof Collapsible> = {
   },
 };
 
+export const Accessibility: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: false,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md">
+        <Text as="span" className="font-medium">Accessible Collapsible</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>This collapsible has proper ARIA attributes: aria-expanded, aria-controls, and keyboard support (Enter/Space).</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates accessibility features: aria-expanded indicates state, aria-controls links trigger to content, and keyboard support (Enter/Space to toggle).',
+      },
+    },
+  },
+};
+
+export const KeyboardNavigation: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: false,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md">
+        <Text as="span" className="font-medium">Try Keyboard Navigation</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>Tab to focus, then press Enter or Space to toggle. The aria-expanded attribute updates automatically.</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use Tab to focus the trigger, then Enter or Space to toggle. Screen readers will announce the state change.',
+      },
+    },
+  },
+};
+
 export default meta;

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

@@ -5,17 +5,28 @@ import Collapsible from './Collapsible';
 describe('Collapsible', () => {
   beforeEach(() => {
     // Clear localStorage before each test
-    localStorage.clear();
+    try {
+      localStorage.clear();
+    } catch {
+      // If clear is not available, remove items manually
+      Object.keys(localStorage).forEach(key => localStorage.removeItem(key));
+    }
   });
 
   afterEach(() => {
-    localStorage.clear();
+    // Clear localStorage after each test
+    try {
+      localStorage.clear();
+    } catch {
+      // If clear is not available, remove items manually
+      Object.keys(localStorage).forEach(key => localStorage.removeItem(key));
+    }
   });
 
   it('renders trigger and children', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
@@ -29,43 +40,43 @@ describe('Collapsible', () => {
   it('starts open when defaultOpen is true', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const content = screen.getByText('Content').parentElement;
+    const content = screen.getByText('Content').parentElement?.parentElement;
     expect(content).toHaveAttribute('aria-hidden', 'false');
   });
 
   it('starts closed when defaultOpen is false', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={false}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const content = screen.getByText('Content').parentElement;
+    const content = screen.getByText('Content').parentElement?.parentElement;
     expect(content).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('toggles content when trigger is clicked', async () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    const content = screen.getByText('Content').parentElement;
+    const button = screen.getByText('Toggle').closest('button');
+    const content = screen.getByText('Content').parentElement?.parentElement;
 
     expect(content).toHaveAttribute('aria-hidden', 'false');
 
@@ -80,7 +91,7 @@ describe('Collapsible', () => {
     const handleOpenChange = vi.fn();
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         open={true}
         onOpenChange={handleOpenChange}
       >
@@ -88,8 +99,8 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    fireEvent.click(button);
+    const button = screen.getByText('Toggle').closest('button');
+    fireEvent.click(button!);
 
     expect(handleOpenChange).toHaveBeenCalledWith(false);
   });
@@ -99,7 +110,7 @@ describe('Collapsible', () => {
     
     const { rerender } = render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
         storageKey={storageKey}
       >
@@ -107,8 +118,8 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    fireEvent.click(button);
+    const button = screen.getByText('Toggle').closest('button');
+    fireEvent.click(button!);
 
     await waitFor(() => {
       expect(localStorage.getItem(storageKey)).toBe('false');
@@ -117,7 +128,7 @@ describe('Collapsible', () => {
     // Re-render and check state is restored
     rerender(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
         storageKey={storageKey}
       >
@@ -125,14 +136,14 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const content = screen.getByText('Content').parentElement;
+    const content = screen.getByText('Content').parentElement?.parentElement;
     expect(content).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('does not toggle when disabled', async () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
         disabled={true}
       >
@@ -140,13 +151,13 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    const content = screen.getByText('Content').parentElement;
+    const button = screen.getByText('Toggle').closest('button');
+    const content = screen.getByText('Content').parentElement?.parentElement;
 
     expect(button).toBeDisabled();
     expect(content).toHaveAttribute('aria-hidden', 'false');
 
-    fireEvent.click(button);
+    fireEvent.click(button!);
 
     // State should not change
     await waitFor(() => {
@@ -157,18 +168,19 @@ describe('Collapsible', () => {
   it('has correct ARIA attributes', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
+    const button = screen.getByText('Toggle').closest('button');
     const content = screen.getByText('Content').parentElement?.parentElement;
 
     expect(button).toHaveAttribute('aria-expanded', 'true');
     expect(button).toHaveAttribute('aria-controls');
     expect(content).toHaveAttribute('id');
+    expect(content).toHaveAttribute('aria-hidden', 'false');
   });
 });

package/src/ui/atoms/Collapsible/Collapsible.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type HTMLAttributes, type ReactNode, type KeyboardEvent } from 'react';
 import { useCollapsible, type UseCollapsibleOptions } from '../../hooks/useCollapsible';
 
 export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -90,6 +90,14 @@ export default function Collapsible({
       <button
         type="button"
         onClick={toggle}
+        onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!disabled) {
+              toggle();
+            }
+          }
+        }}
         disabled={disabled}
         aria-expanded={isOpen}
         aria-controls={contentId}

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

@@ -3,7 +3,7 @@ import ErrorMessage from "./ErrorMessage";
 import { Input, Label } from "../../atoms";
 
 const meta: Meta<typeof ErrorMessage> = {
-  title: "UI/Atoms/ErrorMessage",
+  title: "Atoms/ErrorMessage",
   component: ErrorMessage,
   parameters: {
     docs: {

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Info from "./Info";
 
 const meta: Meta<typeof Info> = {
-  title: "UI/Atoms/Info",
+  title: "Atoms/Info",
   component: Info,
 };