@repobit/dex-system-design 0.21.1 → 0.22.0

package/src/components/paragraph/paragraph.stories.js

@@ -6,230 +6,438 @@ import './paragraph.js';
 export default {
   title    : 'Atoms/Paragraph',
   component: 'bd-p',
+  tags     : ['autodocs'],
   argTypes : {
     kind: {
       control    : { type: 'select' },
       options    : ['regular', 'large', 'small', 'lead'],
-      description: 'Paragraph size variant'
+      description: 'Paragraph size and emphasis variant',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    align: {
+      control    : { type: 'select' },
+      options    : ['left', 'center', 'right', 'justify'],
+      description: 'Text alignment',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'left' }
+      }
+    },
+    color: {
+      control    : 'color',
+      description: 'Custom text color',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'inherit' }
+      }
     },
     content: {
       control    : 'text',
-      description: 'Paragraph text content'
+      description: 'Paragraph text content',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'Paragraph text' }
+      }
     }
   },
   parameters: {
     docs: {
       description: {
-        component: 'A customizable paragraph component with consistent typography and multiple size variants.'
+        component: 'A flexible paragraph component with consistent typography, multiple size variants, and alignment options. Designed for optimal readability and content hierarchy.'
       }
     }
   }
 };
 
-const Template = ({ kind, content }) => html`
-  <bd-p kind="${kind}">${content}</bd-p>
+const Template = ({ kind, align, color, content }) => html`
+  <bd-p 
+    kind="${kind}" 
+    style="${align ? `text-align: ${align};` : ''} ${color ? `color: ${color};` : ''}"
+  >
+    ${content}
+  </bd-p>
 `;
 
+// ============ STORIES ============
+
+export const Default = Template.bind({});
+Default.args = {
+  kind   : 'regular',
+  align  : 'left',
+  color  : '',
+  content: 'Default paragraph with regular styling for standard body text content.'
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default paragraph component with regular size and left alignment. Perfect for most body text content throughout the application.'
+    }
+  }
+};
+
 export const AllVariants = () => html`
-  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 600px;">
-    <div>
-      <bd-p kind="lead">Lead Paragraph - This is a lead paragraph with larger text to introduce content.</bd-p>
-    </div>
+  <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;">All Paragraph Variants</bd-h>
+    <bd-p kind="regular" style="margin-bottom: 2rem;">
+      Explore all available paragraph variants with their specific use cases and typographic characteristics.
+    </bd-p>
     
-    <div>
-      <bd-p kind="large">Large Paragraph - This is a large paragraph for emphasized content that needs more attention.</bd-p>
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="lead" style="margin-bottom: 1rem;">Lead Paragraph - Introduction and Emphasis</bd-p>
+      <bd-p kind="regular" style="color: #64748b;">
+        <strong>Use case:</strong> Introductory text, article openings, key summaries<br>
+        <strong>CSS Variables:</strong> --typography-paragraph-lead-fontSize, --typography-paragraph-lead-lineHeight<br>
+        <strong>Characteristics:</strong> Larger font size, increased line height for better readability
+      </bd-p>
     </div>
-    
-    <div>
-      <bd-p kind="regular">Regular Paragraph - This is the standard paragraph size for most body text content throughout the application.</bd-p>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="margin-bottom: 1rem;">Large Paragraph - Emphasized Content</bd-p>
+      <bd-p kind="regular" style="color: #64748b;">
+        <strong>Use case:</strong> Important content, feature highlights, prominent sections<br>
+        <strong>CSS Variables:</strong> --typography-paragraph-large-fontSize, --typography-paragraph-large-lineHeight<br>
+        <strong>Characteristics:</strong> Slightly larger than regular, maintains hierarchy
+      </bd-p>
     </div>
-    
-    <div>
-      <bd-p kind="small">Small Paragraph - This is a small paragraph for secondary information, captions, or less important content.</bd-p>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="regular" style="margin-bottom: 1rem;">Regular Paragraph - Standard Body Text</bd-p>
+      <bd-p kind="regular" style="color: #64748b;">
+        <strong>Use case:</strong> Main content, article body, standard text blocks<br>
+        <strong>CSS Variables:</strong> --typography-paragraph-regular-fontSize, --typography-paragraph-regular-lineHeight<br>
+        <strong>Characteristics:</strong> Balanced size and spacing for optimal reading
+      </bd-p>
+    </div>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="small" style="margin-bottom: 1rem;">Small Paragraph - Secondary Information</bd-p>
+      <bd-p kind="regular" style="color: #64748b;">
+        <strong>Use case:</strong> Captions, footnotes, legal text, supplementary info<br>
+        <strong>CSS Variables:</strong> --typography-paragraph-small-fontSize, --typography-paragraph-small-lineHeight<br>
+        <strong>Characteristics:</strong> Compact size, reduced visual weight
+      </bd-p>
     </div>
   </div>
 `;
+AllVariants.parameters = {
+  docs: {
+    description: {
+      story: 'Comprehensive overview of all paragraph variants with detailed usage guidelines, CSS variable references, and typographic characteristics for each size option.'
+    }
+  }
+};
 
-export const InCardContext = () => html`
-  <bd-card-section title="Product Features">
-    <bd-card-item 
-      title="Advanced Protection" 
-      icon="/api/placeholder/40/40"
-      align="center"
-    >
-      <bd-p kind="regular">Comprehensive security against malware, ransomware, and online threats with real-time scanning and behavioral analysis.</bd-p>
-      <bd-p kind="small">Includes automatic threat detection and removal</bd-p>
-    </bd-card-item>
-
-    <bd-card-item 
-      title="Privacy Features" 
-      icon="/api/placeholder/40/40"
-      align="center"
-    >
-      <bd-p kind="lead">Protect your personal information with our complete privacy suite.</bd-p>
-      <bd-p kind="regular">VPN, password manager, and webcam protection work together to keep your data secure from unauthorized access.</bd-p>
-    </bd-card-item>
-
-    <bd-card-item 
-      title="Performance Optimization" 
-      icon="/api/placeholder/40/40"
-      align="center"
-    >
-      <bd-p kind="regular">Lightweight design ensures minimal impact on system resources while providing maximum protection.</bd-p>
-      <bd-p kind="small">Uses less than 2% CPU on average</bd-p>
-      <bd-p kind="small">Memory usage: ~150MB</bd-p>
-    </bd-card-item>
-  </bd-card-section>
+export const Lead = Template.bind({});
+Lead.args = {
+  kind   : 'lead',
+  align  : 'left',
+  color  : '',
+  content: 'This is a lead paragraph designed for introductory text and key summaries. It features larger font size and increased line height for better readability and visual impact.'
+};
+Lead.parameters = {
+  docs: {
+    description: {
+      story: 'Lead paragraph variant - Use for introductory text, article openings, and key summaries. Features larger font size and increased line height for enhanced readability and visual prominence.'
+    }
+  }
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  kind   : 'large',
+  align  : 'left',
+  color  : '',
+  content: 'This is a large paragraph for emphasized content that requires more attention. Perfect for highlighting important features or key information within your content.'
+};
+Large.parameters = {
+  docs: {
+    description: {
+      story: 'Large paragraph variant - Ideal for important content, feature highlights, and prominent sections that need slightly more emphasis than regular body text while maintaining proper hierarchy.'
+    }
+  }
+};
+
+export const Regular = Template.bind({});
+Regular.args = {
+  kind   : 'regular',
+  align  : 'left',
+  color  : '',
+  content: 'This is a regular paragraph with standard body text styling. It provides the perfect balance of readability and space efficiency for most content throughout your application.'
+};
+Regular.parameters = {
+  docs: {
+    description: {
+      story: 'Regular paragraph variant - The default choice for main content, article body, and standard text blocks. Offers optimal readability with balanced typographic proportions.'
+    }
+  }
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  kind   : 'small',
+  align  : 'left',
+  color  : '',
+  content: 'This is a small paragraph designed for secondary information, captions, and supplementary content. It maintains readability while reducing visual weight.'
+};
+Small.parameters = {
+  docs: {
+    description: {
+      story: 'Small paragraph variant - Perfect for captions, footnotes, legal text, and supplementary information where reduced visual weight and compact spacing are desired.'
+    }
+  }
+};
+
+export const TextAlignment = () => 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;">Text Alignment Options</bd-h>
+    <bd-p kind="regular" style="margin-bottom: 2rem;">
+      Different text alignment options for various content contexts and design requirements.
+    </bd-p>
+    
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="text-align: left; margin-bottom: 1rem;">Left Aligned Paragraph</bd-p>
+      <bd-p kind="regular" style="text-align: left; color: #64748b;">
+        Default alignment. Best for most content, articles, and body text. Provides optimal readability for left-to-right languages and follows natural reading patterns.
+      </bd-p>
+    </div>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="text-align: center; margin-bottom: 1rem;">Center Aligned Paragraph</bd-p>
+      <bd-p kind="regular" style="text-align: center; color: #64748b;">
+        Ideal for short quotes, testimonials, and introductory text. Creates visual balance and emphasis for specific content pieces that need to stand out.
+      </bd-p>
+    </div>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="text-align: right; margin-bottom: 1rem;">Right Aligned Paragraph</bd-p>
+      <bd-p kind="regular" style="text-align: right; color: #64748b;">
+        Useful for asymmetric layouts, captions, and specific design compositions. Use sparingly for intentional visual effects and creative typographic treatments.
+      </bd-p>
+    </div>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="text-align: justify; margin-bottom: 1rem;">Justified Paragraph</bd-p>
+      <bd-p kind="regular" style="text-align: justify; color: #64748b;">
+        Creates clean edges on both sides of the text block. Best for formal documents, printed materials, and content where precise alignment is important. May require hyphenation for optimal results in longer texts.
+      </bd-p>
+    </div>
+  </div>
 `;
-InCardContext.parameters = {
+TextAlignment.parameters = {
   docs: {
     description: {
-      story: 'Paragraph variants used within card components to demonstrate real-world usage patterns.'
+      story: 'Demonstration of different text alignment options with recommendations for when to use left, center, right, or justified alignment based on content type and design context.'
     }
   }
 };
 
-export const MixedCardLayouts = () => html`
-  <div style="display: flex; flex-direction: column; gap: 3rem;">
+export const ColorCustomization = () => 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;">Color Customization Examples</bd-h>
+    <bd-p kind="regular" style="margin-bottom: 2rem;">
+      Paragraphs can be customized with different colors to match various contexts, themes, and semantic meanings.
+    </bd-p>
     
-    <bd-card-section title="Security Solutions">
-      <bd-card-item 
-        title="Antivirus Protection" 
-        align="start"
-      >
-        <bd-p kind="regular">Real-time protection against viruses, malware, and spyware with advanced heuristic detection.</bd-p>
-        <bd-p kind="small">Updated virus definitions multiple times daily</bd-p>
-      </bd-card-item>
+    <div style="background: #1e293b; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="color: #ffffff; margin-bottom: 1rem;">White Text on Dark Background</bd-p>
+      <bd-p kind="regular" style="color: #cbd5e1;">
+        Perfect for dark theme sections, hero areas, and high-contrast designs. Maintains excellent readability while providing sophisticated visual appeal.
+      </bd-p>
+    </div>
 
-      <bd-card-item 
-        title="Firewall" 
-        align="start"
-      >
-        <bd-p kind="large">Intelligent firewall monitors all network traffic</bd-p>
-        <bd-p kind="regular">Blocks unauthorized access attempts and suspicious connections automatically.</bd-p>
-      </bd-card-item>
+    <div style="background: #dbeafe; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="color: #1e40af; margin-bottom: 1rem;">Primary Brand Color</bd-p>
+      <bd-p kind="regular" style="color: #374151;">
+        Using brand colors for visual consistency and emphasis. Helps maintain brand identity across different content sections and application areas.
+      </bd-p>
+    </div>
+
+    <div style="background: #f0fdf4; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="color: #166534; margin-bottom: 1rem;">Success Green Color</bd-p>
+      <bd-p kind="regular" style="color: #374151;">
+        Color coding for success states, positive outcomes, and confirmation messages. Provides clear visual feedback for successful operations.
+      </bd-p>
+    </div>
+
+    <div style="background: #fef2f2; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="color: #dc2626; margin-bottom: 1rem;">Error Red Color</bd-p>
+      <bd-p kind="regular" style="color: #374151;">
+        Using red for error states, warnings, and critical information. Draws attention to important alerts and requires-action content.
+      </bd-p>
+    </div>
 
+    <div style="background: #f8fafc; padding: 2rem; border-radius: 8px;">
+      <bd-p kind="large" style="color: #6b7280; margin-bottom: 1rem;">Neutral Gray Color</bd-p>
+      <bd-p kind="regular" style="color: #374151;">
+        Subtle gray tones for secondary content, disabled states, and low-emphasis information. Maintains readability while reducing visual weight.
+      </bd-p>
+    </div>
+  </div>
+`;
+ColorCustomization.parameters = {
+  docs: {
+    description: {
+      story: 'Examples of color customization for paragraphs in different contexts including dark themes, brand colors, semantic color coding, and accessibility considerations.'
+    }
+  }
+};
+
+export const ContentHierarchy = () => html`
+  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h1">Cybersecurity Best Practices Guide</bd-h>
+    <bd-p kind="lead" style="margin-bottom: 2rem;">
+      Protecting your digital assets requires a comprehensive approach that combines advanced technology with user awareness and proper security protocols.
+    </bd-p>
+    
+    <bd-h as="h2">Threat Prevention Strategies</bd-h>
+    <bd-p kind="large" style="margin-bottom: 1rem;">
+      Implementing proactive security measures is essential for preventing cyber attacks before they can cause damage to your systems and data.
+    </bd-p>
+    <bd-p kind="regular" style="margin-bottom: 2rem;">
+      Regular software updates, strong password policies, and employee training form the foundation of effective threat prevention. These basic measures, when consistently applied, can prevent the majority of common cyber attacks targeting organizations today.
+    </bd-p>
+    
+    <bd-h as="h3">Real-time Monitoring</bd-h>
+    <bd-p kind="regular" style="margin-bottom: 1.5rem;">
+      Continuous monitoring of network traffic and system activities allows for immediate detection of suspicious behavior and potential security breaches.
+    </bd-p>
+    <bd-p kind="small" style="color: #64748b; margin-bottom: 2rem;">
+      Monitoring systems should be configured to alert security personnel of any anomalous activities that deviate from established baseline patterns.
+    </bd-p>
+    
+    <bd-h as="h2">Incident Response Planning</bd-h>
+    <bd-p kind="regular" style="margin-bottom: 1.5rem;">
+      Having a well-defined incident response plan ensures that your organization can quickly and effectively respond to security incidents when they occur.
+    </bd-p>
+    <bd-p kind="small" style="color: #64748b;">
+      Response plans should include clear escalation procedures, communication protocols, and recovery steps tailored to different types of security incidents.
+    </bd-p>
+  </div>
+`;
+ContentHierarchy.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates proper content hierarchy using different paragraph variants in combination with headings. Shows how lead, large, regular, and small paragraphs work together to create clear information structure and reading flow.'
+    }
+  }
+};
+
+export const InCardContext = () => html`
+  <div style="max-width: 1000px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 2rem; text-align: center;">Security Product Features</bd-h>
+    
+    <bd-card-section title="Core Protection Features">
       <bd-card-item 
-        title="Web Protection" 
-        align="start"
+        title="Advanced Threat Detection" 
+        icon="/api/placeholder/40/40"
+        align="center"
       >
-        <bd-p kind="regular">Safe browsing technology blocks malicious websites and phishing attempts before they can harm your system.</bd-p>
-        <bd-p kind="small">Protects against zero-day threats</bd-p>
+        <bd-p kind="lead" style="text-align: center;">Real-time protection against evolving cyber threats</bd-p>
+        <bd-p kind="regular" style="text-align: center;">
+          Comprehensive security against malware, ransomware, and online threats with advanced behavioral analysis and machine learning algorithms.
+        </bd-p>
+        <bd-p kind="small" style="text-align: center; color: #64748b;">
+          Includes automatic threat detection, quarantine, and removal capabilities
+        </bd-p>
       </bd-card-item>
-    </bd-card-section>
 
-    <bd-card-section title="Additional Features">
       <bd-card-item 
-        title="Parental Control" 
+        title="Privacy & Identity Protection" 
         icon="/api/placeholder/40/40"
         align="center"
       >
-        <bd-p kind="lead">Keep your family safe online</bd-p>
-        <bd-p kind="regular">Monitor and control internet usage, block inappropriate content, and set time limits for children's devices.</bd-p>
+        <bd-p kind="large" style="text-align: center;">Safeguard your personal information</bd-p>
+        <bd-p kind="regular" style="text-align: center;">
+          VPN, password manager, and webcam protection work together to keep your data secure from unauthorized access and identity theft.
+        </bd-p>
+        <bd-p kind="small" style="text-align: center; color: #64748b;">
+          Military-grade encryption for all sensitive data transmission
+        </bd-p>
       </bd-card-item>
 
       <bd-card-item 
-        title="File Encryption" 
+        title="Performance Optimization" 
         icon="/api/placeholder/40/40"
         align="center"
       >
-        <bd-p kind="regular">Secure your sensitive files with military-grade encryption to prevent unauthorized access.</bd-p>
-        <bd-p kind="small">AES-256 encryption standard</bd-p>
+        <bd-p kind="regular" style="text-align: center;">
+          Lightweight design ensures minimal impact on system resources while providing maximum protection and security coverage.
+        </bd-p>
+        <bd-p kind="small" style="text-align: center; color: #64748b;">
+          Average CPU usage: less than 2% • Memory usage: ~150MB
+        </bd-p>
+        <bd-p kind="small" style="text-align: center; color: #64748b;">
+          Compatible with all major operating systems and devices
+        </bd-p>
       </bd-card-item>
     </bd-card-section>
-
   </div>
 `;
-MixedCardLayouts.parameters = {
+InCardContext.parameters = {
   docs: {
     description: {
-      story: 'Different card layouts showing various paragraph variants in context with centered and start-aligned content.'
+      story: 'Real-world example showing paragraph variants used within card components. Demonstrates how different paragraph sizes create clear hierarchy and improve content organization in feature cards and product descriptions.'
     }
   }
 };
 
-export const CardWithDifferentParagraphStyles = () => html`
-  <bd-card-section title="Feature Details">
-    <bd-card-item 
-      title="Complete Security Suite" 
-      align="center"
-    >
-      <bd-p kind="lead">All-in-one protection for your digital life</bd-p>
-      <bd-p kind="regular">Our comprehensive security suite combines multiple layers of protection to safeguard your devices, data, and privacy from evolving cyber threats.</bd-p>
-      <bd-p kind="small">Compatible with Windows, Mac, Android, and iOS</bd-p>
-    </bd-card-item>
-
-    <bd-card-item 
-      title="System Requirements" 
-      align="start"
-    >
-      <bd-p kind="large">Minimum system specifications</bd-p>
-      <bd-p kind="regular">To ensure optimal performance, your system should meet the following requirements:</bd-p>
-      <bd-p kind="small">• Operating System: Windows 10/11 or macOS 10.14+</bd-p>
-      <bd-p kind="small">• Memory: 2GB RAM minimum</bd-p>
-      <bd-p kind="small">• Storage: 2.5GB available space</bd-p>
-      <bd-p kind="small">• Internet connection for updates</bd-p>
-    </bd-card-item>
-
-    <bd-card-item 
-      title="Technical Support" 
-      align="center"
-    >
-      <bd-p kind="regular">Our dedicated support team is available 24/7 to help with any issues or questions you may have.</bd-p>
-      <bd-p kind="small">Response time: under 2 hours for critical issues</bd-p>
-      <bd-p kind="small">Multiple support channels available</bd-p>
-    </bd-card-item>
-  </bd-card-section>
+export const AccessibilityGuidelines = () => html`
+  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2">Accessibility Best Practices</bd-h>
+    
+    <bd-p kind="lead" style="margin-bottom: 2rem;">
+      Proper paragraph styling is essential for creating accessible, readable content that works well for all users, including those with visual impairments or reading difficulties.
+    </bd-p>
+    
+    <div style="background: #f0f9ff; padding: 2rem; border-radius: 8px; margin-bottom: 2rem;">
+      <bd-h as="h3" style="color: #0369a1;">✅ Accessible Typography</bd-h>
+      <bd-p kind="regular" style="margin-bottom: 1rem;">
+        All paragraph variants maintain WCAG AA compliance for contrast ratios and readability. The typographic scale ensures comfortable reading experiences across different content types.
+      </bd-p>
+      <bd-p kind="small" style="color: #64748b;">
+        • Minimum contrast ratio of 4.5:1 for normal text<br>
+        • Line height optimized for readability<br>
+        • Responsive font sizes for different viewports<br>
+        • Clear hierarchy without relying solely on color
+      </bd-p>
+    </div>
+    
+    <div style="background: #f8fafc; padding: 2rem; border-radius: 8px;">
+      <bd-h as="h3" style="color: #374151;">Screen Reader Compatibility</bd-h>
+      <bd-p kind="regular" style="margin-bottom: 1rem;">
+        Paragraph components provide proper semantic structure and are fully compatible with screen readers and other assistive technologies.
+      </bd-p>
+      <bd-p kind="small" style="color: #64748b;">
+        • Semantic HTML structure<br>
+        • Proper heading and paragraph relationships<br>
+        • Logical reading order<br>
+        • Support for text resizing and zooming
+      </bd-p>
+    </div>
+  </div>
 `;
-CardWithDifferentParagraphStyles.parameters = {
+AccessibilityGuidelines.parameters = {
   docs: {
     description: {
-      story: 'Cards demonstrating the use of different paragraph styles (lead, large, regular, small) for varied content hierarchy.'
+      story: 'Accessibility guidelines and best practices for paragraph components, including contrast ratios, readability optimization, screen reader compatibility, and semantic HTML structure considerations.'
     }
   }
 };
 
-export const Regular = Template.bind({});
-Regular.args = {
+export const InteractivePlayground = Template.bind({});
+InteractivePlayground.args = {
   kind   : 'regular',
-  content: 'This is a regular paragraph with standard body text size.'
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  kind   : 'large',
-  content: 'This is a large paragraph for emphasized content.'
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  kind   : 'small',
-  content: 'This is a small paragraph for secondary information.'
-};
-
-export const Lead = Template.bind({});
-Lead.args = {
-  kind   : 'lead',
-  content: 'This is a lead paragraph for introductory text.'
+  align  : 'left',
+  color  : '',
+  content: 'Customize this paragraph to see how different variants, alignments, and colors affect the appearance and readability of your text content.'
 };
-
-export const WithHeadings = () => html`
-  <div style="max-width: 600px;">
-    <bd-h as="h1">Main Section Title</bd-h>
-    <bd-p kind="lead">This lead paragraph introduces the main section.</bd-p>
-    
-    <bd-h as="h2">Subsection Heading</bd-h>
-    <bd-p kind="regular">This regular paragraph contains the main content details.</bd-p>
-  </div>
-`;
-
-export const ContentHierarchy = () => html`
-  <div style="max-width: 600px;">
-    <bd-h as="h1">Product Overview</bd-h>
-    <bd-p kind="lead">Our product offers comprehensive security solutions.</bd-p>
-    
-    <bd-p kind="regular">With real-time threat detection and automatic updates.</bd-p>
-    
-    <bd-p kind="small">System requirements may vary based on the specific product version.</bd-p>
-  </div>
-`;
+InteractivePlayground.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive playground where you can test all paragraph properties in real-time. Use the controls panel to modify the paragraph variant, alignment, color, and content to see immediate results.'
+    }
+  }
+};