@repobit/dex-system-design 0.22.11 → 0.23.1

package/src/components/back/back.stories.js

@@ -1,422 +1,147 @@
 import { html } from 'lit';
-import '../heading/heading.js';
-import '../paragraph/paragraph.js';
 import './back.js';
 
 export default {
-  title    : 'Components/Back',
-  component: 'bd-back',
-  tags     : ['autodocs'],
-  argTypes : {
+  title     : 'Components/Back',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdBack** is a Lit web component that renders a back navigation button with an arrow icon.
+
+### Usage
+\`\`\`html
+<!-- Uses window.history.back() -->
+<bd-back label="Back"></bd-back>
+
+<!-- Navigates to a specific URL -->
+<bd-back label="Go to Home" href="/"></bd-back>
+\`\`\`
+
+### Behavior
+- If \`href\` is provided, clicking navigates to that URL via \`window.location.href\`
+- If \`href\` is empty, clicking calls \`window.history.back()\`
+- Always renders a left-pointing arrow SVG icon alongside the label
+        `
+      }
+    }
+  },
+  argTypes: {
     label: {
       control    : 'text',
-      description: 'Text label displayed on the back button',
+      description: 'Text label displayed next to the back arrow icon',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: 'Back' }
+        defaultValue: { summary: 'Back' },
+        category    : 'Content'
       }
     },
     href: {
       control    : 'text',
-      description: 'Optional URL for specific navigation target',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    color: {
-      control    : 'color',
-      description: 'Custom text color for the back button',
+      description: 'Optional URL to navigate to. If empty, `window.history.back()` is called instead.',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: 'var(--color-neutral-1000)' }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'A mobile-inspired back button component with bold black styling designed for intuitive navigation. Provides both browser history navigation and specific URL targeting with consistent visual hierarchy.'
+        defaultValue: { summary: '' },
+        category    : 'Behavior'
       }
     }
   }
 };
 
-const Template = ({ label, href, color }) => html`
-  <bd-back 
-    label="${label}" 
-    href="${href}"
-    style="${color ? `color: ${color};` : ''}"
-  ></bd-back>
-`;
+// ─── Stories ───────────────────────────────────────────────────────────────
 
-// ============ STORIES ============
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Back',
-  href : '',
-  color: ''
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default back button with bold black styling. When clicked without an href, it uses the browser\'s history back() method to return to the previous page.'
-    }
-  }
-};
-
-export const CustomLabel = Template.bind({});
-CustomLabel.args = {
-  label: 'Înapoi',
-  href : '',
-  color: ''
-};
-CustomLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Back button with localized or custom label text. Perfect for internationalization or specific application contexts where "Back" may not be appropriate.'
-    }
-  }
-};
-
-export const WithHref = Template.bind({});
-WithHref.args = {
-  label: 'Back to Home',
-  href : '/home',
-  color: ''
-};
-WithHref.parameters = {
-  docs: {
-    description: {
-      story: 'Back button that navigates to a specific URL when provided with an href attribute. Useful for when you need to direct users to a specific page rather than using browser history.'
-    }
-  }
-};
-
-export const ComponentShowcase = () => html`
-  <div style="display: flex; flex-direction: column; gap: 3rem; max-width: 1000px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h2" style="margin-bottom: 1rem;">Back Button Component Features</bd-h>
-    <bd-p kind="regular" style="margin-bottom: 2rem;">
-      Explore the versatile applications and design characteristics of the bold black back button component.
-    </bd-p>
-    
-    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 12px;">
-      <bd-h as="h3" style="color: #3b82f6; margin-bottom: 1rem;">Standard Usage Patterns</bd-h>
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
-        <div>
-          <bd-h as="h4" style="margin-bottom: 0.5rem;">Browser History</bd-h>
-          <bd-back label="Back"></bd-back>
-          <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-            Uses <code>window.history.back()</code><br>
-            No href attribute needed
-          </bd-p>
-        </div>
-        
-        <div>
-          <bd-h as="h4" style="margin-bottom: 0.5rem;">Specific Navigation</bd-h>
-          <bd-back label="Products" href="/products"></bd-back>
-          <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-            Directs to specific URL<br>
-            Uses anchor tag behavior
-          </bd-p>
-        </div>
-        
-        <div>
-          <bd-h as="h4" style="margin-bottom: 0.5rem;">Localized</bd-h>
-          <bd-back label="Retour"></bd-back>
-          <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-            French localization example<br>
-            Adapts to user language
-          </bd-p>
-        </div>
-      </div>
-    </div>
-
-    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 12px;">
-      <bd-h as="h3" style="color: #3b82f6; margin-bottom: 1rem;">Design Characteristics</bd-h>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
-        <div>
-          <bd-h as="h4" style="margin-bottom: 1rem;">Visual Properties</bd-h>
-          <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-            <bd-li kind="bullet" size="md"><strong>Color:</strong> Bold black (#000 or --color-neutral-1000)</bd-li>
-            <bd-li kind="bullet" size="md"><strong>Font Weight:</strong> Bold (600-700)</bd-li>
-            <bd-li kind="bullet" size="md"><strong>Typography:</strong> Clean, readable font stack</bd-li>
-            <bd-li kind="bullet" size="md"><strong>Spacing:</strong> Generous padding for touch targets</bd-li>
-            <bd-li kind="bullet" size="md"><strong>Hover:</strong> Subtle opacity changes</bd-li>
-          </bd-list>
-        </div>
-        
-        <div>
-          <bd-h as="h4" style="margin-bottom: 1rem;">Interaction Patterns</bd-h>
-          <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-            <bd-li kind="bullet" size="md"><strong>Click:</strong> Navigates back or to href</bd-li>
-            <bd-li kind="bullet" size="md"><strong>Keyboard:</strong> Tab-accessible, Enter/Space activation</bd-li>
-            <bd-li kind="bullet" size="md"><strong>Focus:</strong> Clear visual focus indicator</bd-li>
-            <bd-li kind="bullet" size="md"><strong>Mobile:</strong> Large touch target (min 44px)</bd-li>
-            <bd-li kind="bullet" size="md"><strong>States:</strong> Normal, hover, active, focus</bd-li>
-          </bd-list>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-ComponentShowcase.parameters = {
-  docs: {
-    description: {
-      story: 'Comprehensive showcase of back button features including standard usage patterns, design characteristics, and interaction behaviors with detailed technical specifications.'
+export const Default = {
+  name      : 'Default',
+  render    : () => html`<bd-back label="Back"></bd-back>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default state with label "Back" and no `href`. Clicking calls `window.history.back()`.'
+      }
     }
   }
 };
 
-export const MobileContext = () => html`
-  <div style="max-width: 400px; margin: 0 auto; padding: 1rem; background: #f8fafc; min-height: 100vh; border: 2px solid #e2e8f0; border-radius: 12px;">
-    <div style="margin-bottom: 2rem;">
-      <bd-back label="Back"></bd-back>
-    </div>
-    
-    <div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
-      <bd-h as="h2" style="margin-bottom: 1rem;">Product Details</bd-h>
-      <bd-p kind="regular" style="margin-bottom: 1rem;">
-        This mobile-style layout demonstrates the back button in its natural context. The bold black styling 
-        provides clear visual hierarchy and follows established mobile navigation patterns.
-      </bd-p>
-      
-      <div style="background: #f0f9ff; padding: 1rem; border-radius: 8px; margin-top: 1.5rem;">
-        <bd-h as="h4" style="color: #0369a1; margin-bottom: 0.5rem;">Mobile Design Principles</bd-h>
-        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-          <bd-li kind="bullet" size="md">Top-left positioning for thumb reachability</bd-li>
-          <bd-li kind="bullet" size="md">Bold color for immediate recognition</bd-li>
-          <bd-li kind="bullet" size="md">Clear label for intuitive interaction</bd-li>
-          <bd-li kind="bullet" size="md">Consistent with iOS/Android patterns</bd-li>
-        </bd-list>
-      </div>
-    </div>
-  </div>
-`;
-MobileContext.parameters = {
-  docs: {
-    description: {
-      story: 'Mobile-optimized context showing the back button in a typical mobile application layout with design principles and best practices for mobile navigation.'
+export const WithHref = {
+  name      : 'With href',
+  render    : () => html`<bd-back label="Go to Home" href="/"></bd-back>`,
+  parameters: {
+    docs: {
+      description: {
+        story: '`href` is set to `/`. Clicking navigates to the home page via `window.location.href`.'
+      }
     }
   }
 };
 
-export const MultipleVariants = () => html`
-  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 600px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h2" style="margin-bottom: 1rem;">Back Button Variants</bd-h>
-    
-    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
-      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-h as="h4" style="margin-bottom: 1rem;">Standard</bd-h>
-        <bd-back label="Back"></bd-back>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          Default browser history navigation
-        </bd-p>
-      </div>
-      
-      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-h as="h4" style="margin-bottom: 1rem;">Localized</bd-h>
-        <bd-back label="Înapoi"></bd-back>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          Romanian localization example
-        </bd-p>
-      </div>
-      
-      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-h as="h4" style="margin-bottom: 1rem;">Specific Target</bd-h>
-        <bd-back label="Back to Home" href="#home"></bd-back>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          Direct navigation to home page
-        </bd-p>
-      </div>
-      
-      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-h as="h4" style="margin-bottom: 1rem;">With Icon</bd-h>
-        <bd-back label="← Back" style="font-size: 0.9rem;"></bd-back>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          Optional arrow icon prefix
-        </bd-p>
-      </div>
-    </div>
-  </div>
-`;
-MultipleVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Collection of different back button variants demonstrating various use cases including localization, specific navigation targets, and optional icon integration.'
+export const CustomLabel = {
+  name      : 'Custom Label',
+  render    : () => html`<bd-back label="Return to Dashboard" href="/dashboard"></bd-back>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom label text "Return to Dashboard" with a specific href target.'
+      }
     }
   }
 };
 
-export const BackgroundContexts = () => html`
-  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 800px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h2" style="margin-bottom: 1rem;">Background Context Examples</bd-h>
-    
-    <div style="background: white; padding: 2rem; border-radius: 12px; border: 2px solid #e2e8f0;">
-      <bd-h as="h3" style="margin-bottom: 1rem;">Light Background</bd-h>
-      <bd-back label="Back"></bd-back>
-      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
-        The bold black color provides maximum contrast and visibility on light backgrounds, 
-        ensuring the back button is immediately noticeable and accessible.
-      </bd-p>
-    </div>
-
-    <div style="background: #1e293b; padding: 2rem; border-radius: 12px; border: 2px solid #334155;">
-      <bd-h as="h3" style="color: white; margin-bottom: 1rem;">Dark Background</bd-h>
-      <bd-back label="Back"></bd-back>
-      <bd-p kind="small" style="color: #cbd5e1; margin-top: 1rem;">
-        On dark backgrounds, the bold black styling maintains its strong visual presence 
-        while providing sufficient contrast for readability and accessibility.
-      </bd-p>
-    </div>
-
-    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 12px;">
-      <bd-h as="h3" style="color: white; margin-bottom: 1rem;">Gradient Background</bd-h>
-      <bd-back label="Back"></bd-back>
-      <bd-p kind="small" style="color: rgba(255,255,255,0.8); margin-top: 1rem;">
-        Even on complex gradient backgrounds, the bold black back button remains clearly 
-        visible and maintains its functional purpose as a navigation element.
-      </bd-p>
-    </div>
-  </div>
-`;
-BackgroundContexts.parameters = {
-  docs: {
-    description: {
-      story: 'Back button displayed across different background contexts demonstrating its versatility and consistent visibility on light, dark, and gradient backgrounds.'
+export const LongLabel = {
+  name      : 'Long Label',
+  render    : () => html`<bd-back label="Go back to the previous page" href="/previous"></bd-back>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tests rendering with a long label string to verify text and icon alignment remain intact.'
+      }
     }
   }
 };
 
-export const AccessibilityFeatures = () => html`
-  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h2" style="margin-bottom: 1rem;">Accessibility Implementation</bd-h>
-    <bd-p kind="regular" style="margin-bottom: 2rem;">
-      The back button component is built with accessibility as a core principle, ensuring 
-      all users can effectively navigate regardless of their abilities or assistive technologies.
-    </bd-p>
-
-    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
-      <div style="border: 2px solid #10b981; padding: 1.5rem; border-radius: 8px; background: #f0fdf4;">
-        <bd-h as="h3" style="color: #059669; margin-bottom: 1rem;">✅ Keyboard Navigation</bd-h>
-        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-          <bd-li kind="bullet" size="md"><strong>Tab:</strong> Focusable in natural tab order</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Enter/Space:</strong> Activates the button</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Focus Indicator:</strong> Clear visual focus ring</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Skip Links:</strong> Compatible with skip navigation</bd-li>
-        </bd-list>
-      </div>
-
-      <div style="border: 2px solid #3b82f6; padding: 1.5rem; border-radius: 8px; background: #eff6ff;">
-        <bd-h as="h3" style="color: #1d4ed8; margin-bottom: 1rem;">✅ Screen Reader Support</bd-h>
-        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-          <bd-li kind="bullet" size="md"><strong>Semantic HTML:</strong> Proper button or anchor element</bd-li>
-          <bd-li kind="bullet" size="md"><strong>ARIA Labels:</strong> Descriptive accessible name</bd-li>
-          <bd-li kind="bullet" size="md"><strong>State Announcement:</strong> Clear action description</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Role:</strong> Appropriate button or link role</bd-li>
-        </bd-list>
-      </div>
-
-      <div style="border: 2px solid #8b5cf6; padding: 1.5rem; border-radius: 8px; background: #faf5ff;">
-        <bd-h as="h3" style="color: #7c3aed; margin-bottom: 1rem;">✅ Visual Accessibility</bd-h>
-        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-          <bd-li kind="bullet" size="md"><strong>Contrast Ratio:</strong> WCAG AA compliant (4.5:1+)</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Text Size:</strong> Responsive and scalable</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Touch Target:</strong> Minimum 44px for mobile</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Color Independence:</strong> Not reliant on color alone</bd-li>
-        </bd-list>
-      </div>
-    </div>
-
-    <div style="margin-top: 2rem; padding: 1.5rem; background: #f8fafc; border-radius: 8px;">
-      <bd-h as="h3" style="margin-bottom: 1rem;">Testing Instructions</bd-h>
-      <bd-p kind="small" style="color: #64748b;">
-        <strong>Keyboard Test:</strong> Try tabbing to the back button and activating it with Enter/Space<br>
-        <strong>Screen Reader Test:</strong> Listen to how the button is announced with NVDA, JAWS, or VoiceOver<br>
-        <strong>Zoom Test:</strong> Increase browser zoom to 200% to verify text remains readable<br>
-        <strong>Color Test:</strong> Use grayscale mode to ensure the button remains distinguishable
-      </bd-p>
-    </div>
-  </div>
-`;
-AccessibilityFeatures.parameters = {
-  docs: {
-    description: {
-      story: 'Comprehensive accessibility documentation covering keyboard navigation, screen reader support, visual accessibility features, and testing procedures for the back button component.'
+export const NoLabel = {
+  name      : 'No Label (empty string)',
+  render    : () => html`<bd-back label=""></bd-back>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge case: `label` set to an empty string. Only the arrow icon is visible.'
+      }
     }
   }
 };
 
-export const InteractiveDemo = () => {
-  return html`
-    <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
-      <bd-h as="h2" style="margin-bottom: 2rem;">Interactive Back Button Demo</bd-h>
-      
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem;">
-        <div>
-          <bd-h as="h3" style="margin-bottom: 1rem;">Navigation Behavior</bd-h>
-          <div style="display: flex; flex-direction: column; gap: 1rem;">
-            <bd-back label="Back (History)"></bd-back>
-            <bd-p kind="small" style="color: #64748b;">
-              Uses: <code>window.history.back()</code><br>
-              Returns to previous page in browser history
-            </bd-p>
-            
-            <bd-back label="Go Home" href="#home-demo"></bd-back>
-            <bd-p kind="small" style="color: #64748b;">
-              Uses: Anchor tag with href<br>
-              Navigates to specific URL location
-            </bd-p>
-          </div>
-        </div>
-        
-        <div>
-          <bd-h as="h3" style="margin-bottom: 1rem;">Design Specifications</bd-h>
-          <div style="background: #f8fafc; padding: 1.5rem; border-radius: 8px;">
-            <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-              <bd-li kind="bullet" size="md"><strong>Color:</strong> var(--color-neutral-1000)</bd-li>
-              <bd-li kind="bullet" size="md"><strong>Font Weight:</strong> var(--typography-fontWeight-bold)</bd-li>
-              <bd-li kind="bullet" size="md"><strong>Font Size:</strong> var(--typography-fontSize-base)</bd-li>
-              <bd-li kind="bullet" size="md"><strong>Padding:</strong> var(--spacing-12) var(--spacing-16)</bd-li>
-              <bd-li kind="bullet" size="md"><strong>Border Radius:</strong> var(--radius-sm)</bd-li>
-              <bd-li kind="bullet" size="md"><strong>Transition:</strong> opacity 0.2s ease</bd-li>
-            </bd-list>
-          </div>
-        </div>
-      </div>
-      
-      <div style="background: #f0f9ff; padding: 1.5rem; border-radius: 8px;">
-        <bd-h as="h3" style="color: #0369a1; margin-bottom: 1rem;">Mobile-First Design Principles</bd-h>
-        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-          <bd-li kind="bullet" size="md"><strong>Thumb-Friendly:</strong> Positioned in top-left for easy reach</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Clear Hierarchy:</strong> Bold styling for immediate recognition</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Consistent Patterns:</strong> Follows iOS/Android navigation standards</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Touch Optimized:</strong> Minimum 44px touch target size</bd-li>
-          <bd-li kind="bullet" size="md"><strong>Performance:</strong> Fast, responsive interaction</bd-li>
-        </bd-list>
-      </div>
-    </div>
-  `;
-};
-InteractiveDemo.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive demonstration showcasing back button navigation behaviors, design specifications, and mobile-first design principles with detailed technical implementation.'
+export const NoHref = {
+  name  : 'No href (history.back)',
+  render: () => html`
+    <p style="font-size: 14px; margin-bottom: 12px;">
+      No <code>href</code> provided — clicking calls <code>window.history.back()</code>.
+    </p>
+    <bd-back label="Back"></bd-back>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'No `href` attribute set. Demonstrates the fallback behavior to `window.history.back()`.'
+      }
     }
   }
 };
 
-export const InteractivePlayground = Template.bind({});
-InteractivePlayground.args = {
-  label: 'Back',
-  href : '',
-  color: ''
-};
-InteractivePlayground.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive playground where you can test all back button properties in real-time. Use the controls panel to modify the label, href, and color properties.'
+export const Playground = {
+  name: '🛝 Playground',
+  args: {
+    label: 'Back',
+    href : ''
+  },
+  render: (args) => html`
+    <bd-back label="${args.label}" href="${args.href}"></bd-back>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fully interactive. Use Controls to change the label and href in real time.'
+      }
     }
   }
 };