@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/carousel/carousel.stories.js

@@ -1,4 +1,7 @@
 import { html } from "lit";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+
 import "./carousel.js";
 
 export default {
@@ -69,7 +72,7 @@ export default {
 const renderParagraphs = (text) =>
   text
     ? text.split("\n\n").map(
-      (paragraph) => html`<p>${paragraph}</p>`
+      (paragraph) => html`<bd-p>${paragraph}</bd-p>`
     )
     : null;
 
@@ -81,7 +84,7 @@ const Template = (args) => html`
       modalText="${args.item1ModalText}"
       icon="${args.item1Icon}"
     >
-      <h3>${args.item1Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item1Title}</bd-h>
       ${renderParagraphs(args.item1Content)}
     </bd-carousel-item>
 
@@ -91,7 +94,7 @@ const Template = (args) => html`
       modalText="${args.item2ModalText}"
       icon="${args.item2Icon}"
     >
-      <h3>${args.item2Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item2Title}</bd-h>
       ${renderParagraphs(args.item2Content)}
     </bd-carousel-item>
 
@@ -101,7 +104,7 @@ const Template = (args) => html`
       modalText="${args.item3ModalText}"
       icon="${args.item3Icon}"
     >
-      <h3>${args.item3Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item3Title}</bd-h>
       ${renderParagraphs(args.item3Content)}
     </bd-carousel-item>
 
@@ -111,7 +114,7 @@ const Template = (args) => html`
       modalText="${args.item4ModalText}"
       icon="${args.item4Icon}"
     >
-      <h3>${args.item4Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item4Title}</bd-h>
       ${renderParagraphs(args.item4Content)}
     </bd-carousel-item>
 
@@ -121,7 +124,7 @@ const Template = (args) => html`
       modalText="${args.item5ModalText}"
       icon="${args.item5Icon}"
     >
-      <h3>${args.item5Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item5Title}</bd-h>
       ${renderParagraphs(args.item5Content)}
     </bd-carousel-item>
 
@@ -131,7 +134,7 @@ const Template = (args) => html`
       modalText="${args.item6ModalText}"
       icon="${args.item6Icon}"
     >
-      <h3>${args.item6Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item6Title}</bd-h>
       ${renderParagraphs(args.item6Content)}
     </bd-carousel-item>
 
@@ -141,7 +144,7 @@ const Template = (args) => html`
       modalText="${args.item7ModalText}"
       icon="${args.item7Icon}"
     >
-      <h3>${args.item7Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item7Title}</bd-h>
       ${renderParagraphs(args.item7Content)}
     </bd-carousel-item>
 
@@ -151,7 +154,7 @@ const Template = (args) => html`
       modalText="${args.item8ModalText}"
       icon="${args.item8Icon}"
     >
-      <h3>${args.item8Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item8Title}</bd-h>
       ${renderParagraphs(args.item8Content)}
     </bd-carousel-item>
   </bd-carousel-section>
@@ -163,11 +166,11 @@ Default.args = {
 
   item1Title: "Scam Copilot Bot",
   item1SubTitle:
-    "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
+    "Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim",
   item1ModalText:
-    "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
+    "Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim",
   item1Icon   : "/assets/light-carousel-img1.png",
-  item1Content: `Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nSpecialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nTest Scam Copilot Bot`,
+  item1Content: `Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim.\n\nSpecialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim.\n\nTest Scam Copilot Bot`,
 
   item2Title    : "Scam Wave Alerts",
   item2SubTitle : "Proactively informs you about scam outbreaks in your region",
@@ -218,12 +221,13 @@ Default.args = {
     "A platform where users can report scams and share experiences to help protect others",
   item7Icon   : "/assets/light-carousel-img1.png",
   item7Content: "A platform where users can report scams and share experiences to help protect others.",
-  item8Title  : "Fraud Prevention Workshops",
+
+  item8Title: "Fraud Prevention Workshops",
   item8SubTitle:
-"Interactive workshops that educate users on identifying and avoiding scams",
+    "Interactive workshops that educate users on identifying and avoiding scams",
   item8ModalText:
-"Interactive workshops that educate users on identifying and avoiding scams",
+    "Interactive workshops that educate users on identifying and avoiding scams",
   item8Icon: "/assets/light-carousel-img1.png",
   item8Content:
-"Interactive workshops that educate users on identifying and avoiding scams."
-};
+    "Interactive workshops that educate users on identifying and avoiding scams."
+};

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

@@ -0,0 +1,68 @@
+import { css } from "lit";
+
+export default css`
+  @layer bd-components {
+    .bd-display {
+      margin: 0;
+      padding: 0;
+      font-family: var(--typography-display-lg-fontFamily);
+      color: var(--color-neutral-900);
+    }
+
+    /* 3xl - Largest display */
+    .bd-display['3xl'],
+    .bd-display.k3xl {
+      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);
+      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);
+      font-weight: var(--typography-display-xl-fontWeight);
+      line-height: var(--typography-display-xl-lineHeight);
+      letter-spacing: var(--typography-display-xl-letterSpacing);
+      font-family: var(--typography-display-xl-fontFamily);
+    }
+
+    /* lg */
+    .bd-display.lg {
+      font-size: var(--typography-display-lg-fontSize);
+      font-weight: var(--typography-display-lg-fontWeight);
+      line-height: var(--typography-display-lg-lineHeight);
+      letter-spacing: var(--typography-display-lg-letterSpacing);
+      font-family: var(--typography-display-lg-fontFamily);
+    }
+
+    /* md */
+    .bd-display.md {
+      font-size: var(--typography-display-md-fontSize);
+      font-weight: var(--typography-display-md-fontWeight);
+      line-height: var(--typography-display-md-lineHeight);
+      letter-spacing: var(--typography-display-md-letterSpacing);
+      font-family: var(--typography-display-md-fontFamily);
+    }
+
+    /* sm - Smallest display */
+    .bd-display.sm {
+      font-size: var(--typography-display-sm-fontSize);
+      font-weight: var(--typography-display-sm-fontWeight);
+      line-height: var(--typography-display-sm-lineHeight);
+      letter-spacing: var(--typography-display-sm-letterSpacing);
+      font-family: var(--typography-display-sm-fontFamily);
+    }
+  }
+`;

package/src/components/display/display.js

@@ -0,0 +1,26 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import displayCSS from "./display.css.js";
+
+export class BdDisplay extends LitElement {
+  static properties = {
+    kind: { type: String, reflect: true } // "3xl", "2xl", "xl", "lg", "md", "sm"
+  };
+
+  constructor() {
+    super();
+    this.kind = "lg"; // Default medium display
+  }
+
+  render() {
+    return html`
+      <div class="bd-display ${this.kind}">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static styles = [tokens, displayCSS];
+}
+
+customElements.define("bd-display", BdDisplay);

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

@@ -0,0 +1,339 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import '../paragraph/paragraph.js';
+import './display.js';
+
+export default {
+  title    : 'Atoms/Display',
+  component: 'bd-display',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+      description: 'Display size variant'
+    },
+    content: {
+      control    : 'text',
+      description: 'Display text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Large display typography for hero sections, landing pages, and prominent headlines.'
+      }
+    }
+  }
+};
+
+const Template = ({ kind, content }) => html`
+  <bd-display kind="${kind}">${content}</bd-display>
+`;
+
+export const AllDisplaySizes = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem; max-width: 1200px; margin: 0 auto;">
+    <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-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-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>
+    </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>
+    </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>
+    </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>
+    </div>
+  </div>
+`;
+AllDisplaySizes.parameters = {
+  docs: {
+    description: {
+      story: 'All display size variants from 3XL (largest) to SM (smallest) for comparison.'
+    }
+  }
+};
+
+export const Display3XL = Template.bind({});
+Display3XL.args = {
+  kind   : '3xl',
+  content: 'Transform Your Digital Security'
+};
+Display3XL.parameters = {
+  docs: {
+    description: {
+      story: 'Largest display size for main hero sections and primary landing page headlines.'
+    }
+  }
+};
+
+export const Display2XL = Template.bind({});
+Display2XL.args = {
+  kind   : '2xl',
+  content: 'Enterprise-Grade Protection'
+};
+Display2XL.parameters = {
+  docs: {
+    description: {
+      story: 'Extra large display for major section titles and important feature announcements.'
+    }
+  }
+};
+
+export const DisplayXL = Template.bind({});
+DisplayXL.args = {
+  kind   : 'xl',
+  content: 'Advanced Threat Intelligence'
+};
+DisplayXL.parameters = {
+  docs: {
+    description: {
+      story: 'Large display size for prominent headers and key value propositions.'
+    }
+  }
+};
+
+export const DisplayLG = Template.bind({});
+DisplayLG.args = {
+  kind   : 'lg',
+  content: 'Real-Time Malware Detection'
+};
+DisplayLG.parameters = {
+  docs: {
+    description: {
+      story: 'Standard display size for balanced prominence and readability.'
+    }
+  }
+};
+
+export const DisplayMD = Template.bind({});
+DisplayMD.args = {
+  kind   : 'md',
+  content: 'Multi-Platform Security'
+};
+DisplayMD.parameters = {
+  docs: {
+    description: {
+      story: 'Medium display size for sections with limited space but still needing impact.'
+    }
+  }
+};
+
+export const DisplaySM = Template.bind({});
+DisplaySM.args = {
+  kind   : 'sm',
+  content: 'Privacy First Approach'
+};
+DisplaySM.parameters = {
+  docs: {
+    description: {
+      story: 'Smallest display size, ideal for compact hero sections or prominent card titles.'
+    }
+  }
+};
+
+
+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 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 = {
+  docs: {
+    description: {
+      story: 'Complete landing page example showing display typography in context with hero sections and feature highlights.'
+    }
+  }
+};
+
+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 = {
+  docs: {
+    description: {
+      story: 'Demonstrates how display typography adapts to different screen sizes while maintaining visual impact.'
+    }
+  }
+};
+
+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>
+  `;
+};
+InteractiveSizeDemo.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive demonstration of all display sizes with their CSS variables and usage recommendations.'
+    }
+  }
+};

package/src/components/divider/divider-horizontal.js

@@ -13,7 +13,7 @@ export class BdDividerHorizontal extends LitElement {
 
   constructor() {
     super();
-    this.width = "200px";
+    this.width = "";
     this.color = "var(--color-neutral-400)";
     this.opacity = "0.25";
   }

package/src/components/footer/footer-links-group.css.js

@@ -5,7 +5,7 @@ export default css`
     display: flex;
     flex-direction: column;
     gap: var(--spacing-12);
-    padding-right: var(--size-64);
+    padding-right: var(--spacing-64);
   }
 
   h4 {

package/src/components/footer/footer-links-group.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
 import { tokens } from '../../tokens/tokens.js';
+import '../heading/heading.js';
 import footerCSS from './footer-links-group.css.js';
 
 export class BdFooterLinksGroup extends LitElement {
@@ -12,14 +13,13 @@ export class BdFooterLinksGroup extends LitElement {
     this.title = '';
   }
 
-
   render() {
     return html`
-    <h4 class="group-title">${this.title ? this.title : html`&nbsp;`}</h4>
+    ${this.title ? html`<bd-h as="h6"  fontWeight="700" color="#ffffff" class="group-title">${this.title}</bd-h>` : html`&nbsp;`}
     <slot></slot>
   `;
   }
 }
 BdFooterLinksGroup.styles = [tokens, footerCSS];
 
-customElements.define('bd-footer-links-group', BdFooterLinksGroup);
+customElements.define('bd-footer-links-group', BdFooterLinksGroup);