@repobit/dex-system-design 0.22.12 → 0.23.2

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

@@ -1,333 +1,127 @@
 import { html } from 'lit';
-import '../heading/heading.js';
-import '../paragraph/paragraph.js';
 import './display.js';
 
 export default {
-  title    : 'Atoms/Display',
-  component: 'bd-display',
-  tags     : ['autodocs'],
-  argTypes : {
+  title     : 'Components/Display',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdDisplay** is a Lit component for large typographic display text with configurable size, color, and alignment.
+
+### Usage
+\`\`\`html
+<bd-display kind="xl" color="#026DFF" align="center">
+  World-class protection
+</bd-display>
+\`\`\`
+
+### Kind Values
+| Kind | Description |
+|---|---|
+| \`sm\` | Small display |
+| \`md\` | Medium display (default) |
+| \`lg\` | Large display |
+| \`xl\` | Extra large |
+| \`xxl\` | 2x extra large |
+| \`xxxl\` | 3x extra large |
+        `
+      }
+    }
+  },
+  argTypes: {
     kind: {
       control    : { type: 'select' },
       options    : ['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
-      description: 'Display size variant',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'lg' }
-      }
+      description: 'Display size variant — maps to a CSS class',
+      table      : { type: { summary: "'sm'|'md'|'lg'|'xl'|'xxl'|'xxxl'" }, defaultValue: { summary: 'lg' }, category: 'Appearance' }
     },
     color: {
       control    : 'color',
-      description: 'Custom text color',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'inherit' }
-      }
+      description: 'Inline text color applied via style attribute',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Appearance' }
     },
     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. Display text is designed for maximum visual impact while maintaining readability.'
-      }
+      description: 'Text alignment applied via inline style',
+      table      : { type: { summary: "'left'|'center'|'right'" }, defaultValue: { summary: 'left' }, category: 'Appearance' }
     }
   }
 };
 
-const Template = ({ kind, color, align, content }) => html`
-  <bd-display 
-    kind="${kind}" 
-    color="${color}"
-    align="${align}"
-  >
-    ${content}
+const render = (args) => html`
+  <bd-display kind="${args.kind}" color="${args.color}" align="${args.align}">
+    World-class security software
   </bd-display>
 `;
 
-// ============ STORIES ============
+const defaultArgs = { kind: 'lg', color: '', align: 'left' };
 
-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.'
-    }
-  }
-};
+// ─── Stories ───────────────────────────────────────────────────────────────
 
-export const AllDisplaySizes = () => html`
-  <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="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="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; 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; 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; 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; 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>
-`;
-AllDisplaySizes.parameters = {
-  docs: {
-    description: {
-      story: 'Complete overview of all display size variants with usage recommendations and CSS variable references.'
-    }
-  }
+export const Default = {
+  name      : 'Default (lg, left)',
+  render    : () => html`<bd-display kind="lg">World-class security software</bd-display>`,
+  parameters: { docs: { description: { story: 'Default display text with `kind="lg"` and left alignment.' } } }
 };
 
-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>
+export const AllKinds = {
+  name  : 'All Kinds',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:16px;">
+      <bd-display kind="sm">Small Display</bd-display>
+      <bd-display kind="md">Medium Display</bd-display>
+      <bd-display kind="lg">Large Display</bd-display>
+      <bd-display kind="xl">Extra Large Display</bd-display>
+      <bd-display kind="xxl">2x Extra Large</bd-display>
+      <bd-display kind="xxxl">3x Extra Large</bd-display>
     </div>
-  </div>
-`;
-TextAlignment.parameters = {
-  docs: {
-    description: {
-      story: 'Demonstrates different text alignment options for display components and their recommended use cases.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'All six `kind` values stacked vertically for scale comparison.' } } }
 };
 
-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>
+export const AllAlignments = {
+  name  : 'All Alignments',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:16px; width:100%;">
+      <bd-display kind="lg" align="left">Left aligned display</bd-display>
+      <bd-display kind="lg" align="center">Center aligned display</bd-display>
+      <bd-display kind="lg" align="right">Right aligned display</bd-display>
     </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>
+  `,
+  parameters: { docs: { description: { story: 'All three alignment options: left, center, and right.' } } }
+};
+
+export const CustomColor = {
+  name  : 'Custom Color',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:12px;">
+      <bd-display kind="lg" color="#026DFF">Blue Display</bd-display>
+      <bd-display kind="lg" color="#E53935">Red Display</bd-display>
+      <bd-display kind="lg" color="#43A047">Green Display</bd-display>
+      <bd-display kind="lg" color="var(--color-neutral-1000)">Token Color</bd-display>
     </div>
+  `,
+  parameters: { docs: { description: { story: 'Custom `color` values including hex codes and CSS custom properties.' } } }
+};
 
-    <div style="background: #fef2f2; padding: 2rem; border-radius: 8px;">
-      <bd-display kind="xl" color="#dc2626">
-        Error Red Color
+export const HeroVariant = {
+  name  : 'Hero Variant',
+  render: () => html`
+    <div style="text-align:center; padding:40px;">
+      <bd-display kind="xxxl" color="#026DFF" align="center">
+        Award-winning cybersecurity
       </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: 'Shows how display components can be customized with different colors for various contexts and themes.'
-    }
-  }
-};
-
-export const SizeXXXL = Template.bind({});
-SizeXXXL.args = {
-  kind   : 'xxxl',
-  color  : '',
-  align  : 'center',
-  content: 'Transform Your Digital Experience'
-};
-SizeXXXL.parameters = {
-  docs: {
-    description: {
-      story: 'Largest display size (XXXL) - Use for primary hero sections on landing pages. Maximum visual impact.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'Large hero-style display with xxxl size, blue color, and center alignment.' } } }
 };
 
-export const SizeXXL = Template.bind({});
-SizeXXL.args = {
-  kind   : 'xxl',
-  color  : '',
-  align  : 'center',
-  content: 'Enterprise-Grade Solutions'
-};
-SizeXXL.parameters = {
-  docs: {
-    description: {
-      story: 'Extra large display (XXL) - Perfect for major section titles and important feature announcements.'
-    }
-  }
-};
-
-export const SizeXL = Template.bind({});
-SizeXL.args = {
-  kind   : 'xl',
-  color  : '',
-  align  : 'left',
-  content: 'Advanced Technology Platform'
-};
-SizeXL.parameters = {
-  docs: {
-    description: {
-      story: 'Large display (XL) - Great for prominent headers and key value propositions in content sections.'
-    }
-  }
-};
-
-export const SizeLG = Template.bind({});
-SizeLG.args = {
-  kind   : 'lg',
-  color  : '',
-  align  : 'left',
-  content: 'Innovative Features & Capabilities'
-};
-SizeLG.parameters = {
-  docs: {
-    description: {
-      story: 'Standard display (LG) - Balanced size suitable for most display text needs across the application.'
-    }
-  }
-};
-
-export const SizeMD = Template.bind({});
-SizeMD.args = {
-  kind   : 'md',
-  color  : '',
-  align  : 'left',
-  content: 'Compact Powerful Display'
-};
-SizeMD.parameters = {
-  docs: {
-    description: {
-      story: 'Medium display (MD) - Compact size for sections with limited vertical space but still requiring visual impact.'
-    }
-  }
-};
-
-export const SizeSM = Template.bind({});
-SizeSM.args = {
-  kind   : 'sm',
-  color  : '',
-  align  : 'left',
-  content: 'Minimal Yet Impactful'
-};
-SizeSM.parameters = {
-  docs: {
-    description: {
-      story: 'Small display (SM) - Smallest display size, ideal for compact layouts where space is premium but hierarchy matters.'
-    }
-  }
-};
-
-export const InteractivePlayground = Template.bind({});
-InteractivePlayground.args = {
-  kind   : 'lg',
-  color  : '',
-  align  : 'left',
-  content: 'Customize This Display Text'
-};
-InteractivePlayground.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive playground where you can test all display properties in real-time. Use the controls panel to modify the display component.'
-    }
-  }
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { ...defaultArgs },
+  render,
+  parameters: { docs: { description: { story: 'Interactive playground. Adjust kind, color, and alignment via Controls.' } } }
 };