@repobit/dex-system-design 0.21.2 → 0.22.0

package/src/components/display/display.stories.js

@@ -6,77 +6,126 @@ import './display.js';
 export default {
   title    : 'Atoms/Display',
   component: 'bd-display',
+  tags     : ['autodocs'],
   argTypes : {
     kind: {
       control    : { type: 'select' },
-      options    : ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
-      description: 'Display size variant'
+      options    : ['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+      description: 'Display size variant',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'lg' }
+      }
+    },
+    color: {
+      control    : 'color',
+      description: 'Custom text color',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'inherit' }
+      }
     },
-    content: {
-      control    : 'text',
-      description: 'Display text content'
+    align: {
+      control    : { type: 'select' },
+      options    : ['left', 'center', 'right'],
+      description: 'Text alignment',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'left' }
+      }
     }
   },
   parameters: {
     docs: {
       description: {
-        component: 'Large display typography for hero sections, landing pages, and prominent headlines.'
+        component: 'Large display typography for hero sections, landing pages, and prominent headlines. Display text is designed for maximum visual impact while maintaining readability.'
       }
     }
   }
 };
 
-const Template = ({ kind, content }) => html`
-  <bd-display kind="${kind}">${content}</bd-display>
+const Template = ({ kind, color, align, content }) => html`
+  <bd-display 
+    kind="${kind}" 
+    color="${color}"
+    align="${align}"
+  >
+    ${content}
+  </bd-display>
 `;
 
+// ============ STORIES ============
+
+export const Default = Template.bind({});
+Default.args = {
+  kind   : 'lg',
+  color  : '',
+  align  : 'left',
+  content: 'Display Heading'
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default display component with medium-large size. Perfect for most prominent headings.'
+    }
+  }
+};
+
 export const AllDisplaySizes = () => html`
-  <div style="display: flex; flex-direction: column; gap: 3rem; max-width: 1200px; margin: 0 auto;">
+  <div style="display: flex; flex-direction: column; gap: 3rem; max-width: 1200px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 2rem;">All Display Size Variants</bd-h>
+    
     <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
-      <bd-display kind="3xl">Display 3XL - Largest Hero Text</bd-display>
-      <bd-p kind="small" style="margin-top: 1rem;">
-        Font size: var(--typography-display-3xl-fontSize)<br>
-        Perfect for main hero sections on landing pages
+      <bd-display kind="xxxl">Display XXXL - Largest Hero Text</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
+        <strong>Use case:</strong> Main hero sections on landing pages<br>
+        <strong>CSS Variable:</strong> --typography-display-xxxl-fontSize<br>
+        <strong>Recommended:</strong> Single prominent headline per page
       </bd-p>
     </div>
 
     <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
-      <bd-display kind="2xl">Display 2XL - Major Headlines</bd-display>
-      <bd-p kind="small" style="margin-top: 1rem;">
-        Font size: var(--typography-display-2xl-fontSize)<br>
-        Ideal for primary section titles and important announcements
+      <bd-display kind="xxl">Display XXL - Major Headlines</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
+        <strong>Use case:</strong> Primary section titles and important announcements<br>
+        <strong>CSS Variable:</strong> --typography-display-xxl-fontSize<br>
+        <strong>Recommended:</strong> Key feature sections
       </bd-p>
     </div>
 
     <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
       <bd-display kind="xl">Display XL - Prominent Headers</bd-display>
-      <bd-p kind="small" style="margin-top: 1rem;">
-        Font size: var(--typography-display-xl-fontSize)<br>
-        Great for feature highlights and key value propositions
+      <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
+        <strong>Use case:</strong> Feature highlights and value propositions<br>
+        <strong>CSS Variable:</strong> --typography-display-xl-fontSize<br>
+        <strong>Recommended:</strong> Secondary important sections
       </bd-p>
     </div>
 
     <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
       <bd-display kind="lg">Display LG - Standard Display</bd-display>
-      <bd-p kind="small" style="margin-top: 1rem;">
-        Font size: var(--typography-display-lg-fontSize)<br>
-        Balanced display size for most prominent text needs
+      <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
+        <strong>Use case:</strong> Balanced display for most prominent text<br>
+        <strong>CSS Variable:</strong> --typography-display-lg-fontSize<br>
+        <strong>Recommended:</strong> Default choice for display text
       </bd-p>
     </div>
 
     <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
       <bd-display kind="md">Display MD - Compact Display</bd-display>
-      <bd-p kind="small" style="margin-top: 1rem;">
-        Font size: var(--typography-display-md-fontSize)<br>
-        Smaller display for sections with less space
+      <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
+        <strong>Use case:</strong> Sections with limited space but needing impact<br>
+        <strong>CSS Variable:</strong> --typography-display-md-fontSize<br>
+        <strong>Recommended:</strong> Cards and compact layouts
       </bd-p>
     </div>
 
     <div>
       <bd-display kind="sm">Display SM - Minimal Display</bd-display>
-      <bd-p kind="small" style="margin-top: 1rem;">
-        Font size: var(--typography-display-sm-fontSize)<br>
-        Smallest display size, still larger than regular headings
+      <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
+        <strong>Use case:</strong> Smallest display for subtle prominence<br>
+        <strong>CSS Variable:</strong> --typography-display-sm-fontSize<br>
+        <strong>Recommended:</strong> When you need hierarchy but space is limited
       </bd-p>
     </div>
   </div>
@@ -84,256 +133,201 @@ export const AllDisplaySizes = () => html`
 AllDisplaySizes.parameters = {
   docs: {
     description: {
-      story: 'All display size variants from 3XL (largest) to SM (smallest) for comparison.'
+      story: 'Complete overview of all display size variants with usage recommendations and CSS variable references.'
     }
   }
 };
 
-export const Display3XL = Template.bind({});
-Display3XL.args = {
-  kind   : '3xl',
-  content: 'Transform Your Digital Security'
-};
-Display3XL.parameters = {
+export const TextAlignment = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 1000px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 1rem;">Text Alignment Options</bd-h>
+    
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-display kind="xl" align="left">
+        Left Aligned Display
+      </bd-display>
+      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
+        Default alignment. Best for most content sections and body text.
+      </bd-p>
+    </div>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-display kind="xl" align="center">
+        Center Aligned Display
+      </bd-display>
+      <bd-p kind="small" style="color: #64748b; margin-top: 1rem; text-align: center;">
+        Ideal for hero sections, testimonials, and feature highlights.
+      </bd-p>
+    </div>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-display kind="xl" align="right">
+        Right Aligned Display
+      </bd-display>
+      <bd-p kind="small" style="color: #64748b; margin-top: 1rem; text-align: right;">
+        Useful for asymmetric layouts and creative designs.
+      </bd-p>
+    </div>
+  </div>
+`;
+TextAlignment.parameters = {
   docs: {
     description: {
-      story: 'Largest display size for main hero sections and primary landing page headlines.'
+      story: 'Demonstrates different text alignment options for display components and their recommended use cases.'
     }
   }
 };
 
-export const Display2XL = Template.bind({});
-Display2XL.args = {
-  kind   : '2xl',
-  content: 'Enterprise-Grade Protection'
-};
-Display2XL.parameters = {
+export const ColorCustomization = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 1000px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 1rem;">Color Customization</bd-h>
+    
+    <div style="background: #1e293b; padding: 2rem; border-radius: 8px;">
+      <bd-display kind="xl" color="#ffffff">
+        White Text on Dark
+      </bd-display>
+      <bd-p kind="small" style="color: #cbd5e1; margin-top: 1rem;">
+        Perfect for dark theme sections and hero areas.
+      </bd-p>
+    </div>
+
+    <div style="background: #dbeafe; padding: 2rem; border-radius: 8px;">
+      <bd-display kind="xl" color="#1e40af">
+        Primary Brand Color
+      </bd-display>
+      <bd-p kind="small" style="color: #374151; margin-top: 1rem;">
+        Using brand colors for emphasis and visual consistency.
+      </bd-p>
+    </div>
+
+    <div style="background: #f0fdf4; padding: 2rem; border-radius: 8px;">
+      <bd-display kind="xl" color="#166534">
+        Success Green Color
+      </bd-display>
+      <bd-p kind="small" style="color: #374151; margin-top: 1rem;">
+        Color coding for specific contexts like success states.
+      </bd-p>
+    </div>
+
+    <div style="background: #fef2f2; padding: 2rem; border-radius: 8px;">
+      <bd-display kind="xl" color="#dc2626">
+        Error Red Color
+      </bd-display>
+      <bd-p kind="small" style="color: #374151; margin-top: 1rem;">
+        Using red for error states or important warnings.
+      </bd-p>
+    </div>
+  </div>
+`;
+ColorCustomization.parameters = {
   docs: {
     description: {
-      story: 'Extra large display for major section titles and important feature announcements.'
+      story: 'Shows how display components can be customized with different colors for various contexts and themes.'
     }
   }
 };
 
-export const DisplayXL = Template.bind({});
-DisplayXL.args = {
-  kind   : 'xl',
-  content: 'Advanced Threat Intelligence'
+export const SizeXXXL = Template.bind({});
+SizeXXXL.args = {
+  kind   : 'xxxl',
+  color  : '',
+  align  : 'center',
+  content: 'Transform Your Digital Experience'
 };
-DisplayXL.parameters = {
+SizeXXXL.parameters = {
   docs: {
     description: {
-      story: 'Large display size for prominent headers and key value propositions.'
+      story: 'Largest display size (XXXL) - Use for primary hero sections on landing pages. Maximum visual impact.'
     }
   }
 };
 
-export const DisplayLG = Template.bind({});
-DisplayLG.args = {
-  kind   : 'lg',
-  content: 'Real-Time Malware Detection'
+export const SizeXXL = Template.bind({});
+SizeXXL.args = {
+  kind   : 'xxl',
+  color  : '',
+  align  : 'center',
+  content: 'Enterprise-Grade Solutions'
 };
-DisplayLG.parameters = {
+SizeXXL.parameters = {
   docs: {
     description: {
-      story: 'Standard display size for balanced prominence and readability.'
+      story: 'Extra large display (XXL) - Perfect for major section titles and important feature announcements.'
     }
   }
 };
 
-export const DisplayMD = Template.bind({});
-DisplayMD.args = {
-  kind   : 'md',
-  content: 'Multi-Platform Security'
+export const SizeXL = Template.bind({});
+SizeXL.args = {
+  kind   : 'xl',
+  color  : '',
+  align  : 'left',
+  content: 'Advanced Technology Platform'
 };
-DisplayMD.parameters = {
+SizeXL.parameters = {
   docs: {
     description: {
-      story: 'Medium display size for sections with limited space but still needing impact.'
+      story: 'Large display (XL) - Great for prominent headers and key value propositions in content sections.'
     }
   }
 };
 
-export const DisplaySM = Template.bind({});
-DisplaySM.args = {
-  kind   : 'sm',
-  content: 'Privacy First Approach'
+export const SizeLG = Template.bind({});
+SizeLG.args = {
+  kind   : 'lg',
+  color  : '',
+  align  : 'left',
+  content: 'Innovative Features & Capabilities'
 };
-DisplaySM.parameters = {
+SizeLG.parameters = {
   docs: {
     description: {
-      story: 'Smallest display size, ideal for compact hero sections or prominent card titles.'
+      story: 'Standard display (LG) - Balanced size suitable for most display text needs across the application.'
     }
   }
 };
 
-
-export const ComparisonWithHeadings = () => html`
-  <div style="max-width: 800px; margin: 0 auto;">
-    <bd-display kind="xl" style="margin-bottom: 3rem;">Display XL vs Headings</bd-display>
-    
-    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;">
-      <div>
-        <bd-h as="h3" style="margin-bottom: 1rem;">Display Typography</bd-h>
-        <bd-display kind="sm" style="margin-bottom: 1rem;">Display SM Text</bd-display>
-        <bd-display kind="md" style="margin-bottom: 1rem;">Display MD Text</bd-display>
-        <bd-display kind="lg" style="margin-bottom: 1rem;">Display LG Text</bd-display>
-        <bd-display kind="xl">Display XL Text</bd-display>
-      </div>
-      
-      <div>
-        <bd-h as="h3" style="margin-bottom: 1rem;">Heading Typography</bd-h>
-        <bd-h as="h6" style="margin-bottom: 1rem;">Heading H6 Text</bd-h>
-        <bd-h as="h5" style="margin-bottom: 1rem;">Heading H5 Text</bd-h>
-        <bd-h as="h4" style="margin-bottom: 1rem;">Heading H4 Text</bd-h>
-        <bd-h as="h3">Heading H3 Text</bd-h>
-      </div>
-    </div>
-    
-    <bd-p kind="regular" style="margin-top: 2rem;">
-      <strong>Usage guidelines:</strong> Display typography is for prominent, attention-grabbing text 
-      while headings are for semantic document structure and section titles.
-    </bd-p>
-  </div>
-`;
-ComparisonWithHeadings.parameters = {
-  docs: {
-    description: {
-      story: 'Comparison between display typography and heading typography to demonstrate their different use cases and visual hierarchy.'
-    }
-  }
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  kind   : 'md',
+  color  : '',
+  align  : 'left',
+  content: 'Compact Powerful Display'
 };
-
-export const LandingPageExample = () => html`
-  <div style="max-width: 1400px; margin: 0 auto;">
-    <!-- Hero Section -->
-    <section style="text-align: center; padding: 4rem 2rem; background: #f8fafc;">
-      <bd-display kind="2xl" style="margin-bottom: 1rem;">
-        Complete Digital Protection
-      </bd-display>
-      <bd-display kind="lg" style="margin-bottom: 2rem; color: #3b82f6;">
-        For Home & Business
-      </bd-display>
-      <bd-p kind="lead" style="max-width: 600px; margin: 0 auto;">
-        Enterprise-grade security solutions tailored for modern threats and evolving digital landscapes.
-      </bd-p>
-    </section>
-
-    <!-- Features Section -->
-    <section style="padding: 4rem 2rem;">
-      <bd-display kind="xl" style="text-align: center; margin-bottom: 3rem;">
-        Why Choose Our Solution?
-      </bd-display>
-      
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
-        <div style="text-align: center;">
-          <bd-display kind="lg" style="color: #3b82f6; margin-bottom: 1rem;">99.9%</bd-display>
-          <bd-h as="h4" style="margin-bottom: 1rem;">Threat Detection Rate</bd-h>
-          <bd-p kind="regular">Industry-leading accuracy in identifying and neutralizing cyber threats.</bd-p>
-        </div>
-        
-        <div style="text-align: center;">
-          <bd-display kind="lg" style="color: #3b82f6; margin-bottom: 1rem;">24/7</bd-display>
-          <bd-h as="h4" style="margin-bottom: 1rem;">Real-Time Monitoring</bd-h>
-          <bd-p kind="regular">Continuous protection with instant response to emerging threats.</bd-p>
-        </div>
-        
-        <div style="text-align: center;">
-          <bd-display kind="lg" style="color: #3b82f6; margin-bottom: 1rem;">50M+</bd-display>
-          <bd-h as="h4" style="margin-bottom: 1rem;">Protected Users</bd-h>
-          <bd-p kind="regular">Trusted by millions worldwide for their digital security needs.</bd-p>
-        </div>
-      </div>
-    </section>
-  </div>
-`;
-LandingPageExample.parameters = {
+SizeMD.parameters = {
   docs: {
     description: {
-      story: 'Complete landing page example showing display typography in context with hero sections and feature highlights.'
+      story: 'Medium display (MD) - Compact size for sections with limited vertical space but still requiring visual impact.'
     }
   }
 };
 
-export const ResponsiveDisplay = () => html`
-  <div style="max-width: 100%; padding: 2rem;">
-    <bd-h as="h2" style="margin-bottom: 2rem;">Responsive Display Typography</bd-h>
-    
-    <div style="background: #f1f5f9; padding: 2rem; border-radius: 12px;">
-      <bd-display kind="xl" style="margin-bottom: 1rem;">
-        Adaptive Text Sizing
-      </bd-display>
-      <bd-p kind="regular">
-        Display components automatically adjust based on viewport size and CSS variables. 
-        They maintain optimal readability across all devices from mobile to desktop.
-      </bd-p>
-      
-      <div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem;">
-        <div style="flex: 1; min-width: 200px;">
-          <bd-h as="h4">Mobile</bd-h>
-          <bd-display kind="sm" style="color: #3b82f6;">Compact & Clear</bd-display>
-        </div>
-        
-        <div style="flex: 1; min-width: 200px;">
-          <bd-h as="h4">Tablet</bd-h>
-          <bd-display kind="md" style="color: #3b82f6;">Balanced Impact</bd-display>
-        </div>
-        
-        <div style="flex: 1; min-width: 200px;">
-          <bd-h as="h4">Desktop</bd-h>
-          <bd-display kind="lg" style="color: #3b82f6;">Maximum Presence</bd-display>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-ResponsiveDisplay.parameters = {
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  kind   : 'sm',
+  color  : '',
+  align  : 'left',
+  content: 'Minimal Yet Impactful'
+};
+SizeSM.parameters = {
   docs: {
     description: {
-      story: 'Demonstrates how display typography adapts to different screen sizes while maintaining visual impact.'
+      story: 'Small display (SM) - Smallest display size, ideal for compact layouts where space is premium but hierarchy matters.'
     }
   }
 };
 
-export const InteractiveSizeDemo = () => {
-  const sizes = [
-    { kind: '3xl', label: '3XL', description: 'Largest - Hero sections' },
-    { kind: '2xl', label: '2XL', description: 'Extra large - Major headlines' },
-    { kind: 'xl', label: 'XL', description: 'Large - Prominent headers' },
-    { kind: 'lg', label: 'LG', description: 'Standard - Balanced display' },
-    { kind: 'md', label: 'MD', description: 'Medium - Compact display' },
-    { kind: 'sm', label: 'SM', description: 'Small - Minimal display' }
-  ];
-
-  return html`
-    <div style="max-width: 800px; margin: 0 auto;">
-      <bd-h as="h2" style="margin-bottom: 2rem;">Interactive Display Size Demo</bd-h>
-      <bd-p kind="regular" style="margin-bottom: 3rem;">
-        Explore different display sizes and their typical use cases:
-      </bd-p>
-      
-      ${sizes.map(size => html`
-        <div style="margin: 3rem 0; padding: 2rem; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-          <bd-display kind="${size.kind}" style="margin-bottom: 1rem;">
-            ${size.label} Display Size
-          </bd-display>
-          <bd-p kind="regular" style="margin-bottom: 1rem;">
-            This is the <strong>${size.kind}</strong> display size - ${size.description}.
-          </bd-p>
-          <bd-p kind="small" style="color: #64748b;">
-            CSS Variables: 
-            <code>--typography-display-${size.kind}-fontSize</code>, 
-            <code>--typography-display-${size.kind}-fontWeight</code>
-          </bd-p>
-        </div>
-      `)}
-    </div>
-  `;
+export const InteractivePlayground = Template.bind({});
+InteractivePlayground.args = {
+  kind   : 'lg',
+  color  : '',
+  align  : 'left',
+  content: 'Customize This Display Text'
 };
-InteractiveSizeDemo.parameters = {
+InteractivePlayground.parameters = {
   docs: {
     description: {
-      story: 'Interactive demonstration of all display sizes with their CSS variables and usage recommendations.'
+      story: 'Interactive playground where you can test all display properties in real-time. Use the controls panel to modify the display component.'
     }
   }
 };