@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Badge/Badge.test.tsx

@@ -4,48 +4,48 @@ import { Badge } from './Badge';
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Badge Component', () => {
-    it('renders correctly', () => {
-        render(<Badge label="Test Badge" />);
-        expect(screen.getByText('Test Badge')).toBeInTheDocument();
-    });
-
-    it('renders with aria-label', () => {
-        render(<Badge label="Badge" aria-label="Accessible Badge" />);
-        expect(screen.getByLabelText('Accessible Badge')).toBeInTheDocument();
-    });
-
-    it('renders close button when onRemove is provided', () => {
-        const handleRemove = vi.fn();
-        render(<Badge label="Removable" onRemove={handleRemove} />);
-
-        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
-        expect(closeButton).toBeInTheDocument();
-
-        fireEvent.click(closeButton);
-        expect(handleRemove).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not render close button when onRemove is not provided', () => {
-        render(<Badge label="Static" />);
-        expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-
-    it('disables close button when badge is disabled', () => {
-        const handleRemove = vi.fn();
-        render(<Badge label="Disabled" onRemove={handleRemove} disabled />);
-
-        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
-        expect(closeButton).toBeDisabled();
-
-        fireEvent.click(closeButton);
-        expect(handleRemove).not.toHaveBeenCalled();
-    });
+  it('renders correctly', () => {
+    render(<Badge label="Test Badge" />);
+    expect(screen.getByText('Test Badge')).toBeInTheDocument();
+  });
+
+  it('renders with aria-label', () => {
+    render(<Badge label="Badge" aria-label="Accessible Badge" />);
+    expect(screen.getByLabelText('Accessible Badge')).toBeInTheDocument();
+  });
+
+  it('renders close button when onRemove is provided', () => {
+    const handleRemove = vi.fn();
+    render(<Badge label="Removable" onRemove={handleRemove} />);
+
+    const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+    expect(handleRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render close button when onRemove is not provided', () => {
+    render(<Badge label="Static" />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('disables close button when badge is disabled', () => {
+    const handleRemove = vi.fn();
+    render(<Badge label="Disabled" onRemove={handleRemove} disabled />);
+
+    const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+    expect(closeButton).toBeDisabled();
+
+    fireEvent.click(closeButton);
+    expect(handleRemove).not.toHaveBeenCalled();
+  });
 });

package/src/components/Badge/Badge.tsx

@@ -4,75 +4,77 @@ import { BADGE } from '../../lib/constants/components';
 import { BadgeProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Badge: React.FC<BadgeProps> = memo(({
-  label,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  icon,
-  onRemove,
-  'aria-label': ariaLabel,
-  className = '',
-  glass,
-  style,
-}) => {
-  const { generateBadgeClass } = useBadge({
-    variant,
-    size,
-    disabled,
-  });
+export const Badge: React.FC<BadgeProps> = memo(
+  ({
+    label,
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    icon,
+    onRemove,
+    'aria-label': ariaLabel,
+    className = '',
+    glass,
+    style,
+  }) => {
+    const { generateBadgeClass } = useBadge({
+      variant,
+      size,
+      disabled,
+    });
 
-  const ref = useRef<HTMLSpanElement>(null);
+    const ref = useRef<HTMLSpanElement>(null);
 
-  const badgeClass = generateBadgeClass({
-    variant,
-    size,
-    disabled,
-    className: `${className} ${glass ? 'c-badge--glass' : ''}`.trim(),
-  });
+    const badgeClass = generateBadgeClass({
+      variant,
+      size,
+      disabled,
+      className: `${className} ${glass ? 'c-badge--glass' : ''}`.trim(),
+    });
 
-  const badgeElement = (
-    <span
-      className={badgeClass}
-      aria-disabled={disabled}
-      aria-label={ariaLabel}
-      ref={ref}
-      style={style}
-    >
-      {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
-      <span>{label}</span>
-      {onRemove && (
-        <button
-          type="button"
-          className="c-badge__close"
-          onClick={onRemove}
-          aria-label="Remove badge"
-          disabled={disabled}
-        >
-          ×
-        </button>
-      )}
-    </span>
-  );
+    const badgeElement = (
+      <span
+        className={badgeClass}
+        aria-disabled={disabled}
+        aria-label={ariaLabel}
+        ref={ref}
+        style={style}
+      >
+        {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
+        <span>{label}</span>
+        {onRemove && (
+          <button
+            type="button"
+            className="c-badge__close"
+            onClick={onRemove}
+            aria-label="Remove badge"
+            disabled={disabled}
+          >
+            ×
+          </button>
+        )}
+      </span>
+    );
 
-  if (glass) {
-    // Default glass settings for badges
-    const defaultGlassProps = {
-      displacementScale: 20,
-      cornerRadius: ref.current?.getBoundingClientRect().width
-        ? ref.current?.getBoundingClientRect().width / 2
-        : 16,
-      className: 'c-badge--glass',
-      elasticity: 0,
-    };
+    if (glass) {
+      // Default glass settings for badges
+      const defaultGlassProps = {
+        displacementScale: 20,
+        cornerRadius: ref.current?.getBoundingClientRect().width
+          ? ref.current?.getBoundingClientRect().width / 2
+          : 16,
+        className: 'c-badge--glass',
+        elasticity: 0,
+      };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return <AtomixGlass {...glassProps}>{badgeElement}</AtomixGlass>;
-  }
+      return <AtomixGlass {...glassProps}>{badgeElement}</AtomixGlass>;
+    }
 
-  return badgeElement;
-});
+    return badgeElement;
+  }
+);
 
 Badge.displayName = 'Badge';
 

package/src/components/Block/Block.stories.tsx

@@ -1,10 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Grid } from '../../layouts/Grid/Grid';
 import GridCol from '../../layouts/Grid/GridCol';
 import { Button } from '../Button/Button';
 import { Card } from '../Card/Card';
 import { Block } from './Block';
 
+// ============================================================================
+// META CONFIGURATION
+// ============================================================================
+
 const meta = {
   title: 'Components/Block',
   component: Block,
@@ -43,8 +48,12 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// ============================================================================
+// STORY IMPLEMENTATIONS
+// ============================================================================
+
 // Basic usage
-export const Default: Story = {
+export const BasicUsage: Story = {
   args: {
     children: (
       <div>
@@ -100,7 +109,7 @@ export const HeroSection: Story = {
       <div className="u-text-center">
         <h1>Welcome to Our Platform</h1>
         <p>Experience the power of modern web development with our comprehensive design system.</p>
-        <Button size="lg" variant="secondary">
+        <Button size="lg" variant="secondary" onClick={fn()}>
           Get Started
         </Button>
       </div>
@@ -169,7 +178,9 @@ export const ArticleLayout: Story = {
       <Block spacing="md" container={{ type: 'sm' }} background="secondary">
         <h3>Ready to get started?</h3>
         <p>Join thousands of developers building with our design system.</p>
-        <Button variant="primary">Start Building</Button>
+        <Button variant="primary" onClick={fn()}>
+          Start Building
+        </Button>
       </Block>
     </div>
   ),
@@ -292,10 +303,10 @@ export const ContentPreview: Story = {
             A comprehensive design system with reusable components and consistent design patterns
           </p>
           <div className="u-mb-4">
-            <Button size="lg" variant="secondary" className="u-me-2">
+            <Button size="lg" variant="secondary" className="u-me-2" onClick={fn()}>
               Get Started
             </Button>
-            <Button size="lg" variant="invert" className="u-ms-2">
+            <Button size="lg" variant="invert" className="u-ms-2" onClick={fn()}>
               Learn More
             </Button>
           </div>
@@ -311,10 +322,10 @@ export const ContentPreview: Story = {
               text="Multiple variants and sizes for all use cases"
               actions={
                 <div>
-                  <Button variant="primary" size="sm" className="u-me-1">
+                  <Button variant="primary" size="sm" className="u-me-1" onClick={fn()}>
                     Primary
                   </Button>
-                  <Button variant="secondary" size="sm">
+                  <Button variant="secondary" size="sm" onClick={fn()}>
                     Secondary
                   </Button>
                 </div>
@@ -325,14 +336,22 @@ export const ContentPreview: Story = {
             <Card
               title="Cards"
               text="Flexible content containers with multiple options"
-              actions={<Button variant="primary">View Details</Button>}
+              actions={
+                <Button variant="primary" onClick={fn()}>
+                  View Details
+                </Button>
+              }
             />
           </GridCol>
           <GridCol xs={12} md={6} lg={4}>
             <Card
               title="Blocks"
               text="Layout containers with consistent spacing and backgrounds"
-              actions={<Button variant="primary">Learn More</Button>}
+              actions={
+                <Button variant="primary" onClick={fn()}>
+                  Learn More
+                </Button>
+              }
             />
           </GridCol>
         </Grid>
@@ -378,10 +397,10 @@ export const ContentPreview: Story = {
             Join thousands of developers and designers building with Atomix Design System
           </p>
           <div>
-            <Button size="lg" variant="primary" className="u-me-2">
+            <Button size="lg" variant="primary" className="u-me-2" onClick={fn()}>
               Documentation
             </Button>
-            <Button size="lg" variant="secondary" className="u-ms-2">
+            <Button size="lg" variant="secondary" className="u-ms-2" onClick={fn()}>
               Examples
             </Button>
           </div>

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,33 +1,78 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Icon } from '../Icon';
 import { Breadcrumb } from './Breadcrumb';
 
-const meta = {
+const meta: Meta<typeof Breadcrumb> = {
   title: 'Components/Breadcrumb',
   component: Breadcrumb,
   parameters: {
-    layout: 'centered',
+    layout: 'padded',
     docs: {
       description: {
-        component:
-          'The Breadcrumb component provides navigation context by showing the current page location within a site hierarchy. It helps users understand where they are and provides quick navigation to parent pages. Breadcrumbs support custom dividers, icons, and are fully accessible.',
+        component: `
+# Breadcrumb Component
+
+The Breadcrumb component provides navigation context by showing the current page location within a site hierarchy. It helps users understand where they are and provides quick navigation to parent pages. Breadcrumbs support custom dividers, icons, and are fully accessible.
+
+## Features
+- Clear hierarchical navigation
+- Support for custom dividers
+- Icon integration
+- Keyboard navigation support
+- Full accessibility compliance
+- Responsive design
+
+## Accessibility
+- Semantic navigation landmark with aria-label
+- Proper heading order
+- Keyboard navigation support (Tab, Enter, Space)
+- Screen reader friendly markup
+`,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
-    items: { control: 'object' },
-    divider: { control: 'text' },
-    className: { control: 'text' },
-    'aria-label': { control: 'text' },
+    items: {
+      control: 'object',
+      description: 'Array of breadcrumb items with label, href, and optional properties',
+      table: {
+        type: { summary: 'BreadcrumbItem[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    divider: {
+      control: 'text',
+      description: 'Custom divider character or component between breadcrumb items',
+      table: {
+        type: { summary: 'string | ReactNode' },
+        defaultValue: { summary: '>' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    'aria-label': {
+      control: 'text',
+      description: 'Label for the navigation landmark',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Breadcrumb' },
+      },
+    },
   },
 } satisfies Meta<typeof Breadcrumb>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default Breadcrumb
-export const Default: Story = {
+// Basic Breadcrumb
+export const BasicUsage: Story = {
   args: {
     items: [
       { label: 'Home', href: '/' },
@@ -36,6 +81,13 @@ export const Default: Story = {
       { label: 'Product Name', active: true },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Simple breadcrumb with basic text links showing site hierarchy.',
+      },
+    },
+  },
 };
 
 // Breadcrumb with Icons
@@ -64,10 +116,17 @@ export const WithIcons: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Breadcrumb with icons for each item to enhance visual recognition.',
+      },
+    },
+  },
 };
 
 // Breadcrumb with Custom Divider
-export const CustomDivider: Story = {
+export const WithCustomDivider: Story = {
   args: {
     items: [
       { label: 'Home', href: '/' },
@@ -77,6 +136,13 @@ export const CustomDivider: Story = {
     ],
     divider: '/',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Breadcrumb with custom divider character instead of the default arrow.',
+      },
+    },
+  },
 };
 
 // Breadcrumb with Click Handlers
@@ -86,28 +152,81 @@ export const WithClickHandlers: Story = {
       {
         label: 'Home',
         href: '/',
-        onClick: e => {
-          e.preventDefault();
-          alert('Home clicked');
-        },
+        onClick: fn(),
       },
       {
         label: 'Products',
         href: '/products',
-        onClick: e => {
-          e.preventDefault();
-          alert('Products clicked');
-        },
+        onClick: fn(),
       },
       {
         label: 'Category',
         href: '/products/category',
-        onClick: e => {
-          e.preventDefault();
-          alert('Category clicked');
-        },
+        onClick: fn(),
       },
       { label: 'Product Name', active: true },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Breadcrumb with click handlers to demonstrate client-side navigation.',
+      },
+    },
+  },
+};
+
+// Breadcrumb with Mixed Interactions
+export const WithMixedInteractions: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      {
+        label: 'Products',
+        onClick: fn(),
+        // Simulating client-side navigation
+      },
+      {
+        label: 'Category',
+        href: '/products/category',
+        icon: <Icon name="Folder" size="sm" />,
+      },
+      {
+        label: 'Product Name',
+        active: true,
+        icon: <Icon name="Tag" size="sm" />,
+      },
+    ],
+    divider: '|',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Breadcrumb combining both traditional link navigation and client-side interactions.',
+      },
+    },
+  },
+};
+
+// Long Breadcrumb Path
+export const LongBreadcrumbPath: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Electronics', href: '/products/electronics' },
+      { label: 'Computers', href: '/products/electronics/computers' },
+      { label: 'Laptops', href: '/products/electronics/computers/laptops' },
+      { label: 'Gaming Laptops', href: '/products/electronics/computers/laptops/gaming' },
+      { label: 'Current Product', active: true },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Long breadcrumb path demonstrating responsive behavior with many levels.',
+      },
+    },
+  },
 };