@shohojdhara/atomix 0.3.14 → 0.3.15

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,7 @@ 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 +301,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 +320,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 +334,14 @@ 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 +387,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>
@@ -389,4 +398,4 @@ export const ContentPreview: Story = {
       </Block>
     </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,80 @@ 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.',
+      },
+    },
+  },
+};