@repobit/dex-system-design 0.21.1 → 0.22.0

package/src/components/badge/badge.stories.js

@@ -3,9 +3,20 @@ import '../heading/heading.js';
 import './badge.js';
 
 export default {
-  title    : 'Atoms/Badge',
-  component: 'bd-badge',
-  argTypes : {
+  title     : 'Atoms/Badge',
+  component : 'bd-badge',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Un **badge** care poate afișa un text sau un element în slot.
+Badge-ul acceptă culori personalizate, variante predefinite, dimensiuni diferite și mărimi de font.
+Acest Storybook include toate exemplele posibile pentru testare completă.`
+      }
+    }
+  },
+  argTypes: {
     children: {
       control     : 'text',
       description : 'Conținutul afișat în interiorul badge-ului (prin slot).',
@@ -13,54 +24,57 @@ export default {
     },
     color: {
       control     : 'color',
-      description : 'Culoarea de fundal a badge-ului',
+      description : 'Culoarea de fundal a badge-ului.',
       defaultValue: '#026DFF'
     },
     variant: {
-      control: {
-        type   : 'select',
-        options: ['', 'bd-light-blue', 'bd-light-green']
-      },
-      description : 'Variantă de stil pentru badge',
-      defaultValue: ''
+      control    : { type: 'select' },
+      options    : ['', 'bd-light-blue', 'bd-light-green'],
+      description: 'Variantă de stil predefinită pentru badge.'
     },
     size: {
-      control: {
-        type   : 'select',
-        options: ['sm', 'md', 'lg']
-      },
-      description : 'Dimensiunea badge-ului',
-      defaultValue: 'md'
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg'],
+      description: 'Dimensiunea badge-ului.'
     },
     fontsize: {
-      control: {
-        type   : 'select',
-        options: ['12', '14', '16']
-      },
-      description : 'Mărimea fontului',
-      defaultValue: '14'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Un badge simplu care afișează un text prin slot și are multiple opțiuni de personalizare.'
-      }
+      control    : { type: 'select' },
+      options    : ['12', '14', '16'],
+      description: 'Mărimea fontului textului.'
     }
   }
 };
 
+// TEMPLATE DE BAZĂ
 const Template = ({ children, color, variant, size, fontsize }) => html`
-  <bd-badge 
-    color="${color}" 
-    variant="${variant}" 
-    size="${size}" 
+  <bd-badge
+    color="${color}"
+    variant="${variant}"
+    size="${size}"
     fontsize="${fontsize}"
   >
     ${children}
   </bd-badge>
 `;
 
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Badge',
+  color   : '#026DFF',
+  variant : '',
+  size    : 'md',
+  fontsize: '14'
+};
+
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Exemplul de bază pentru componenta Badge.'
+    }
+  }
+};
+
+// TEMPLATE SECȚIUNI
 const GridTemplate = (items) => html`
   <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
     ${items}
@@ -74,16 +88,10 @@ const SectionTemplate = (title, items) => html`
   </div>
 `;
 
-export const Default = Template.bind({});
-Default.args = {
-  children: 'Badge',
-  color   : '#026DFF',
-  variant : '',
-  size    : 'md',
-  fontsize: '14'
-};
-
-export const AllVariants = () => {
+// ===================
+// 🔵 TOATE VARIANTELE
+// ===================
+export const Variants = () => {
   const variants = [
     { variant: '', label: 'Default' },
     { variant: 'bd-light-blue', label: 'Light Blue' },
@@ -91,14 +99,23 @@ export const AllVariants = () => {
   ];
 
   return SectionTemplate(
-    'Toate Variantele',
+    'Variante disponibile',
     variants.map(item => html`
       <bd-badge variant="${item.variant}">${item.label}</bd-badge>
     `)
   );
 };
 
-export const AllSizes = () => {
+Variants.parameters = {
+  docs: {
+    description: { story: 'Toate variantele vizuale ale componentei bd-badge.' }
+  }
+};
+
+// ===================
+// 🔶 TOATE DIMENSIUNILE
+// ===================
+export const Sizes = () => {
   const sizes = [
     { size: 'sm', label: 'Small' },
     { size: 'md', label: 'Medium' },
@@ -106,14 +123,23 @@ export const AllSizes = () => {
   ];
 
   return SectionTemplate(
-    'Toate Dimensiunile',
+    'Dimensiuni disponibile',
     sizes.map(item => html`
       <bd-badge size="${item.size}">${item.label}</bd-badge>
     `)
   );
 };
 
-export const AllFontSizes = () => {
+Sizes.parameters = {
+  docs: {
+    description: { story: 'Dimensiuni disponibile pentru badge.' }
+  }
+};
+
+// ==========================
+// 🔤 TOATE MĂRIMILE DE FONT
+// ==========================
+export const FontSizes = () => {
   const fontSizes = [
     { fontsize: '12', label: 'Font 12' },
     { fontsize: '14', label: 'Font 14' },
@@ -121,13 +147,22 @@ export const AllFontSizes = () => {
   ];
 
   return SectionTemplate(
-    'Toate Mărimile de Font',
+    'Mărimi de font disponibile',
     fontSizes.map(item => html`
       <bd-badge fontsize="${item.fontsize}">${item.label}</bd-badge>
     `)
   );
 };
 
+FontSizes.parameters = {
+  docs: {
+    description: { story: 'Toate mărimile de font suportate de badge.' }
+  }
+};
+
+// =======================================
+// 🧪 COMBINAȚII: VARIANTE × DIMENSIUNI
+// =======================================
 export const Combinations = () => {
   const combinations = [
     { variant: 'bd-light-blue', size: 'sm', label: 'Light Blue Small' },
@@ -139,59 +174,17 @@ export const Combinations = () => {
   ];
 
   return SectionTemplate(
-    'Combinații Variante și Dimensiuni',
+    'Combinații între variante și dimensiuni',
     combinations.map(item => html`
-      <bd-badge variant="${item.variant}" size="${item.size}">${item.label}</bd-badge>
+      <bd-badge variant="${item.variant}" size="${item.size}">
+        ${item.label}
+      </bd-badge>
     `)
   );
 };
 
-export const CustomColors = () => {
-  const colors = [
-    { color: '#FF5733', label: 'Rosu' },
-    { color: '#33FF57', label: 'Verde' },
-    { color: '#3357FF', label: 'Albastru' },
-    { color: '#F3FF33', label: 'Galben', textColor: '#000' },
-    { color: '#FF33F3', label: 'Roz' },
-    { color: '#33FFF3', label: 'Turcoaz' }
-  ];
-
-  return SectionTemplate(
-    'Culori Personalizate',
-    colors.map(item => html`
-      <bd-badge color="${item.color}">${item.label}</bd-badge>
-    `)
-  );
-};
-
-AllVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Toate variantele de badge disponibile.'
-    }
-  }
-};
-
-AllSizes.parameters = {
-  docs: {
-    description: {
-      story: 'Toate dimensiunile de badge disponibile.'
-    }
-  }
-};
-
-AllFontSizes.parameters = {
-  docs: {
-    description: {
-      story: 'Toate mărimile de font disponibile pentru badge-uri.'
-    }
-  }
-};
-
 Combinations.parameters = {
   docs: {
-    description: {
-      story: 'Diverse combinații între variante și dimensiuni.'
-    }
+    description: { story: 'Combinații ale tuturor variantelor și dimensiunilor.' }
   }
-};
+};

package/src/components/breadcrumb/breadcrumb.stories.js

@@ -5,10 +5,21 @@ export default {
   title        : 'Components/Breadcrumb',
   component    : 'bd-breadcrumb',
   subcomponents: { 'BreadcrumbItem': 'bd-breadcrumb-item' },
-  parameters   : {
+  tags         : ['autodocs'],
+  argTypes     : {
+    mobileBreakpoint: {
+      control    : 'text',
+      description: 'Breakpoint for mobile responsive behavior',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '768px' }
+      }
+    }
+  },
+  parameters: {
     docs: {
       description: {
-        component: 'A navigation component that shows the current page location within a hierarchy.'
+        component: 'A navigation component that shows the current page location within a hierarchy. Supports responsive behavior and accessible navigation.'
       }
     }
   }
@@ -30,6 +41,13 @@ export const Default = () => html`
     </bd-breadcrumb-item>
   </bd-breadcrumb>
 `;
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default breadcrumb navigation showing a typical product hierarchy. The current page is marked with the `current` attribute and is not clickable.'
+    }
+  }
+};
 
 export const WithNestedLinks = () => html`
   <bd-breadcrumb>
@@ -47,6 +65,13 @@ export const WithNestedLinks = () => html`
     </bd-breadcrumb-item>
   </bd-breadcrumb>
 `;
+WithNestedLinks.parameters = {
+  docs: {
+    description: {
+      story: 'Breadcrumb with nested product categories demonstrating deep hierarchical navigation structure.'
+    }
+  }
+};
 
 export const MixedItems = () => html`
   <bd-breadcrumb>
@@ -64,6 +89,13 @@ export const MixedItems = () => html`
     </bd-breadcrumb-item>
   </bd-breadcrumb>
 `;
+MixedItems.parameters = {
+  docs: {
+    description: {
+      story: 'Breadcrumb with mixed navigation items - some are clickable links while others are non-clickable text nodes for intermediate hierarchy levels.'
+    }
+  }
+};
 
 export const LongPath = () => html`
   <bd-breadcrumb>
@@ -87,6 +119,13 @@ export const LongPath = () => html`
     </bd-breadcrumb-item>
   </bd-breadcrumb>
 `;
+LongPath.parameters = {
+  docs: {
+    description: {
+      story: 'Breadcrumb with an extended hierarchical path showing how the component handles deep navigation structures and long product names.'
+    }
+  }
+};
 
 export const MobileView = () => html`
   <div style="max-width: 400px; border: 1px solid #ccc; padding: 20px;">
@@ -106,4 +145,129 @@ export const MobileView = () => html`
       Resize window to see responsive behavior.
     </p>
   </div>
-`;
+`;
+MobileView.parameters = {
+  docs: {
+    description: {
+      story: 'Mobile-optimized breadcrumb demonstration. The component automatically adapts to smaller screens by collapsing intermediate items when the viewport is below the specified breakpoint.'
+    }
+  }
+};
+
+export const EcommerceExample = () => html`
+  <bd-breadcrumb>
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/electronics">
+      Electronics
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/electronics/computers">
+      Computers & Tablets
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/electronics/computers/laptops">
+      Laptops
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Gaming Laptops - High Performance
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+`;
+EcommerceExample.parameters = {
+  docs: {
+    description: {
+      story: 'E-commerce style breadcrumb showing typical product categorization hierarchy commonly used in online shopping platforms.'
+    }
+  }
+};
+
+export const DocumentationExample = () => html`
+  <bd-breadcrumb>
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/help">
+      Help Center
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/help/getting-started">
+      Getting Started
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/help/getting-started/installation">
+      Installation Guide
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Troubleshooting
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+`;
+DocumentationExample.parameters = {
+  docs: {
+    description: {
+      story: 'Documentation site breadcrumb demonstrating hierarchical navigation through help articles and documentation sections.'
+    }
+  }
+};
+
+export const AccessibilityExample = () => html`
+  <bd-breadcrumb aria-label="Breadcrumb navigation">
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/accessibility">
+      Accessibility
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/accessibility/components">
+      Components
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Breadcrumb Best Practices
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+  
+  <div style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;">
+    <h4 style="margin-top: 0;">Accessibility Features</h4>
+    <ul style="margin-bottom: 0;">
+      <li><strong>ARIA landmarks:</strong> Proper navigation role with aria-label</li>
+      <li><strong>Current page indication:</strong> aria-current="page" for active item</li>
+      <li><strong>Keyboard navigation:</strong> All links are keyboard accessible</li>
+      <li><strong>Semantic structure:</strong> Clear hierarchy for screen readers</li>
+    </ul>
+  </div>
+`;
+AccessibilityExample.parameters = {
+  docs: {
+    description: {
+      story: 'Accessibility-focused breadcrumb example demonstrating proper ARIA attributes and semantic HTML structure for screen reader compatibility and keyboard navigation.'
+    }
+  }
+};
+
+// Template for interactive controls
+const BreadcrumbTemplate = ({ mobileBreakpoint }) => html`
+  <bd-breadcrumb mobile-breakpoint="${mobileBreakpoint}">
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/products">
+      Products
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/products/security">
+      Security
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Current Product
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+`;
+
+export const InteractiveExample = BreadcrumbTemplate.bind({});
+InteractiveExample.args = {
+  mobileBreakpoint: '768px'
+};
+InteractiveExample.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive breadcrumb example. Use the controls panel to adjust the mobile breakpoint and see how it affects the responsive behavior.'
+    }
+  }
+};