@repobit/dex-system-design 0.21.1 → 0.22.0

package/src/components/cards/card.stories.js

@@ -1,19 +1,36 @@
 import { html } from 'lit';
 import '../heading/heading.js';
 import './card.js';
+
 export default {
   title        : 'Components/Card',
   component    : 'bd-card-section',
   subcomponents: { 'bd-card-item': 'bd-card-item' },
+  tags         : ['autodocs'],
   argTypes     : {
     title: {
       control    : 'text',
-      description: 'Section title (optional)'
+      description: 'Section title (optional)',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
     },
     align: {
       control    : { type: 'select' },
       options    : ['start', 'center'],
-      description: 'Content alignment for card items'
+      description: 'Content alignment for card items',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'start' }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A flexible card component system for displaying features, services, or content in an organized grid layout. Supports icons, titles, descriptions, and multiple alignment options.'
+      }
     }
   }
 };
@@ -71,12 +88,26 @@ Default.args = {
   title: 'Security Features',
   align: 'start'
 };
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default card section with security features. Each card includes an icon, title, and descriptive text with start alignment for optimal readability.'
+    }
+  }
+};
 
 export const CenterAligned = Template.bind({});
 CenterAligned.args = {
   title: 'Security Features - Centered',
   align: 'center'
 };
+CenterAligned.parameters = {
+  docs: {
+    description: {
+      story: 'Card section with center-aligned content. Perfect for feature highlights and creating visual balance in the layout.'
+    }
+  }
+};
 
 export const IconTitleOnly = () => html`
   <bd-card-section title="Icon + Title Only Cards">
@@ -105,6 +136,13 @@ export const IconTitleOnly = () => html`
     ></bd-card-item>
   </bd-card-section>
 `;
+IconTitleOnly.parameters = {
+  docs: {
+    description: {
+      story: 'Minimal card layout with only icons and titles. Ideal for quick visual scanning and when space is limited.'
+    }
+  }
+};
 
 export const IconTitleOnlyCentered = () => html`
   <bd-card-section title="Icon + Title Only - Centered">
@@ -133,6 +171,13 @@ export const IconTitleOnlyCentered = () => html`
     ></bd-card-item>
   </bd-card-section>
 `;
+IconTitleOnlyCentered.parameters = {
+  docs: {
+    description: {
+      story: 'Center-aligned icon and title cards. Creates a balanced, symmetrical appearance perfect for feature showcases.'
+    }
+  }
+};
 
 export const MixedContentTypes = () => html`
   <bd-card-section title="Mixed Content Types">
@@ -165,6 +210,13 @@ export const MixedContentTypes = () => html`
     ></bd-card-item>
   </bd-card-section>
 `;
+MixedContentTypes.parameters = {
+  docs: {
+    description: {
+      story: 'Mixed card content types within the same section. Demonstrates flexibility by combining cards with and without descriptions.'
+    }
+  }
+};
 
 export const MixedContentTypesCentered = () => html`
   <bd-card-section title="Mixed Content Types - Centered">
@@ -197,18 +249,39 @@ export const MixedContentTypesCentered = () => html`
     ></bd-card-item>
   </bd-card-section>
 `;
+MixedContentTypesCentered.parameters = {
+  docs: {
+    description: {
+      story: 'Center-aligned mixed content cards. Maintains visual consistency while accommodating different content types.'
+    }
+  }
+};
 
 export const WithoutTitle = Template.bind({});
 WithoutTitle.args = {
   title: '',
   align: 'start'
 };
+WithoutTitle.parameters = {
+  docs: {
+    description: {
+      story: 'Card section without a title. Useful when the section context is clear from the surrounding content or layout.'
+    }
+  }
+};
 
 export const WithoutTitleCentered = Template.bind({});
 WithoutTitleCentered.args = {
   title: '',
   align: 'center'
 };
+WithoutTitleCentered.parameters = {
+  docs: {
+    description: {
+      story: 'Title-less card section with center alignment. Creates a clean, minimalist appearance.'
+    }
+  }
+};
 
 export const SingleCard = (args) => html`
   <bd-card-section title="${args.title}">
@@ -228,6 +301,13 @@ SingleCard.args = {
   content  : 'Specialized AI chatbot that helps you identify suspicious online interactions.',
   align    : 'start'
 };
+SingleCard.parameters = {
+  docs: {
+    description: {
+      story: 'Single card demonstration. Perfect for highlighting one key feature or piece of content prominently.'
+    }
+  }
+};
 
 export const SingleCardCentered = SingleCard.bind({});
 SingleCardCentered.args = {
@@ -235,6 +315,13 @@ SingleCardCentered.args = {
   title: 'Single Feature - Centered',
   align: 'center'
 };
+SingleCardCentered.parameters = {
+  docs: {
+    description: {
+      story: 'Single center-aligned card. Ideal for call-to-action sections or main feature highlights.'
+    }
+  }
+};
 
 export const SingleCardNoContent = (args) => html`
   <bd-card-section title="${args.title}">
@@ -251,6 +338,13 @@ SingleCardNoContent.args = {
   icon     : '/assets/device_protection.png',
   align    : 'start'
 };
+SingleCardNoContent.parameters = {
+  docs: {
+    description: {
+      story: 'Single card with only icon and title. Minimalist approach for simple feature representation.'
+    }
+  }
+};
 
 export const SingleCardNoContentCentered = SingleCardNoContent.bind({});
 SingleCardNoContentCentered.args = {
@@ -258,6 +352,13 @@ SingleCardNoContentCentered.args = {
   title: 'Single Feature - Icon + Title Only - Centered',
   align: 'center'
 };
+SingleCardNoContentCentered.parameters = {
+  docs: {
+    description: {
+      story: 'Single center-aligned icon and title card. Creates focused visual attention on one key element.'
+    }
+  }
+};
 
 export const MultipleCardsGrid = (args) => html`
   <bd-card-section title="${args.title}">
@@ -280,6 +381,13 @@ MultipleCardsGrid.args = {
   cardCount: 6,
   align    : 'start'
 };
+MultipleCardsGrid.parameters = {
+  docs: {
+    description: {
+      story: 'Grid layout with multiple cards. Demonstrates how the component automatically handles larger numbers of cards with responsive grid behavior.'
+    }
+  }
+};
 
 export const MultipleCardsGridCentered = MultipleCardsGrid.bind({});
 MultipleCardsGridCentered.args = {
@@ -287,6 +395,13 @@ MultipleCardsGridCentered.args = {
   title: 'Multiple Security Features - Centered',
   align: 'center'
 };
+MultipleCardsGridCentered.parameters = {
+  docs: {
+    description: {
+      story: 'Multiple center-aligned cards in grid layout. Maintains visual balance across larger card collections.'
+    }
+  }
+};
 
 export const CardItemVariations = () => html`
   <div style="display: flex; flex-direction: column; gap: 3rem;">
@@ -361,6 +476,13 @@ export const CardItemVariations = () => html`
     </bd-card-section>
   </div>
 `;
+CardItemVariations.parameters = {
+  docs: {
+    description: {
+      story: 'Comprehensive demonstration of all possible card item variations with both start and center alignment options. Shows flexibility in content composition.'
+    }
+  }
+};
 
 export const LongContent = () => html`
   <div style="display: flex; flex-direction: column; gap: 3rem;">
@@ -421,6 +543,13 @@ export const LongContent = () => html`
     </bd-card-section>
   </div>
 `;
+LongContent.parameters = {
+  docs: {
+    description: {
+      story: 'Cards with extensive content including multiple paragraphs and long titles. Demonstrates how the component handles text-heavy scenarios while maintaining readability.'
+    }
+  }
+};
 
 export const MixedAlignment = () => html`
   <bd-card-section title="Mixed Alignment Cards">
@@ -459,6 +588,13 @@ export const MixedAlignment = () => html`
     </bd-card-item>
   </bd-card-section>
 `;
+MixedAlignment.parameters = {
+  docs: {
+    description: {
+      story: 'Mixed alignment within the same card section. Shows how different alignment choices can be used strategically for varied content types and emphasis.'
+    }
+  }
+};
 
 export const AlignmentComparison = () => html`
   <bd-card-section title="Alignment Comparison">
@@ -488,6 +624,13 @@ export const AlignmentComparison = () => html`
     </div>
   </bd-card-section>
 `;
+AlignmentComparison.parameters = {
+  docs: {
+    description: {
+      story: 'Side-by-side comparison of start vs center alignment. Helps understand the visual and functional differences between alignment options for informed design decisions.'
+    }
+  }
+};
 
 export const ResponsiveAlignment = () => html`
   <bd-card-section title="Responsive Alignment Examples">
@@ -509,4 +652,11 @@ export const ResponsiveAlignment = () => html`
       <bd-p kind="small">On mobile devices, the content will remain centered for consistency.</bd-p>
     </bd-card-item>
   </bd-card-section>
-`;
+`;
+ResponsiveAlignment.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstration of responsive alignment behavior. Shows how alignment choices are maintained across different screen sizes and devices.'
+    }
+  }
+};

package/src/components/display/display.css.js

@@ -9,26 +9,23 @@ export default css`
       color: var(--color-neutral-900);
     }
 
-    /* 3xl - Largest display */
-    .bd-display['3xl'],
-    .bd-display.k3xl {
-      font-size: var(--typography-display-3xl-fontSize);
+      
+ /* xxxl */
+    .bd-display.xxxl {
+     font-size: var(--typography-display-3xl-fontSize);
       font-weight: var(--typography-display-3xl-fontWeight);
       line-height: var(--typography-display-3xl-lineHeight);
       letter-spacing: var(--typography-display-3xl-letterSpacing);
       font-family: var(--typography-display-3xl-fontFamily);
     }
-
-    /* 2xl */
-    .bd-display['2xl'],
-    .bd-display.k2xl {
-      font-size: var(--typography-display-2xl-fontSize);
+ /* xxl */
+    .bd-display.xxl {
+        font-size: var(--typography-display-2xl-fontSize);
       font-weight: var(--typography-display-2xl-fontWeight);
       line-height: var(--typography-display-2xl-lineHeight);
       letter-spacing: var(--typography-display-2xl-letterSpacing);
       font-family: var(--typography-display-2xl-fontFamily);
     }
-
     /* xl */
     .bd-display.xl {
       font-size: var(--typography-display-xl-fontSize);

package/src/components/display/display.js

@@ -4,17 +4,29 @@ import displayCSS from "./display.css.js";
 
 export class BdDisplay extends LitElement {
   static properties = {
-    kind: { type: String, reflect: true } // "3xl", "2xl", "xl", "lg", "md", "sm"
+    kind : { type: String, reflect: true }, // "xxxl", "xxl", "xl", "lg", "md", "sm"
+    color: { type: String, reflect: true }, // Custom text color
+    align: { type: String, reflect: true }  // "left", "center", "right"
   };
 
   constructor() {
     super();
     this.kind = "lg"; // Default medium display
+    this.color = "";
+    this.align = "left"; // Default left alignment
   }
 
   render() {
+    const styles = [];
+    if (this.color) {
+      styles.push(`color: ${this.color}`);
+    }
+    if (this.align) {
+      styles.push(`text-align: ${this.align}`);
+    }
+
     return html`
-      <div class="bd-display ${this.kind}">
+      <div class="bd-display ${this.kind}" style="${styles.join('; ')}">
         <slot></slot>
       </div>
     `;