@repobit/dex-system-design 0.20.0 → 0.21.0

package/src/components/paragraph/paragraph.css.js

@@ -1,14 +1,44 @@
 import { css } from "lit";
 
 export default css`
-.bd-font-brand{
-    font-family: var(--typography-fontFamily-sans);
-}
-.bd-font-cod {
-  font-family: var(--font-family-mono);
-}
-
-.bd-font-comp {
-  font-family: 'Arial',sans-serif;
-}
-`;
+  :host {
+    display: block;
+  }
+
+  p {
+    all: unset;
+    display: block;
+    font-family: var(--typography-body-regular-fontFamily, var(--typography-fontFamily-sans));
+    color: var(--color-neutral-900);
+    margin-bottom: var(--spacing-md);
+  }
+
+  /* === Font Size Variants === */
+  :host([kind="large"]) p {
+    font-size: var(--typography-body-large-fontSize);
+    font-weight: var(--typography-body-large-fontWeight);
+    line-height: var(--typography-body-large-lineHeight);
+    letter-spacing: var(--typography-body-large-letterSpacing);
+  }
+
+  :host([kind="regular"]) p {
+    font-size: var(--typography-body-regular-fontSize);
+    font-weight: var(--typography-body-regular-fontWeight);
+    line-height: var(--typography-body-regular-lineHeight);
+    letter-spacing: var(--typography-body-regular-letterSpacing);
+  }
+
+  :host([kind="small"]) p {
+    font-size: var(--typography-body-small-fontSize);
+    font-weight: var(--typography-body-small-fontWeight);
+    line-height: var(--typography-body-small-lineHeight);
+    letter-spacing: var(--typography-body-small-letterSpacing);
+  }
+
+  :host([kind="lead"]) p {
+    font-size: var(--typography-body-lead-fontSize);
+    font-weight: var(--typography-body-lead-fontWeight);
+    line-height: var(--typography-body-lead-lineHeight);
+    letter-spacing: var(--typography-body-lead-letterSpacing);
+  }
+`;

package/src/components/paragraph/paragraph.js

@@ -1,60 +1,22 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import textCSS from "../../tokens/typography.css.js";
-import paragraphText from "../paragraph/paragraph.css.js";
+import paragraphCSS from "./paragraph.css.js";
 
-class TextFontBrand extends LitElement {
+export class BdP extends LitElement {
   static properties = {
-    text: { type: String }
+    kind: { type: String, reflect: true }
   };
 
   constructor() {
     super();
-    this.text = "Componenta Text Font Brand.";
-
+    this.kind = "regular";
   }
 
   render() {
-    return html` <p class="bd-font-brand text-display-medium">${this.text}</p> `;
+    return html`<p><slot></slot></p>`;
   }
-}
 
-
-class TextFontCod extends LitElement {
-  static properties = {
-    text: { type: String }
-  };
-
-  constructor() {
-    super();
-    this.text = "Componenta Text Font Cod.";
-  }
-
-  render() {
-    return html` <p class="bd-font-cod">${this.text}</p> `;
-  }
-}
-
-
-class TextFontComp extends LitElement {
-  static properties = {
-    text: { type: String }
-  };
-
-  constructor() {
-    super();
-    this.text = "Componenta Text Font Comp.";
-
-  }
-
-  render() {
-    return html` <p class="bd-font-comp">${this.text}</p> `;
-  }
+  static styles = [tokens, paragraphCSS];
 }
-TextFontBrand.styles = [tokens, paragraphText, textCSS];
-TextFontCod.styles = [tokens, paragraphText, textCSS];
-TextFontComp.styles = [tokens, paragraphText, textCSS];
 
-customElements.define("bd-font-brand", TextFontBrand);
-customElements.define("bd-font-cod", TextFontCod);
-customElements.define("bd-font-comp", TextFontComp);
+customElements.define("bd-p", BdP);

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

@@ -0,0 +1,235 @@
+import { html } from 'lit';
+import '../cards/card.js';
+import '../heading/heading.js';
+import './paragraph.js';
+
+export default {
+  title    : 'Atoms/Paragraph',
+  component: 'bd-p',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['regular', 'large', 'small', 'lead'],
+      description: 'Paragraph size variant'
+    },
+    content: {
+      control    : 'text',
+      description: 'Paragraph text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable paragraph component with consistent typography and multiple size variants.'
+      }
+    }
+  }
+};
+
+const Template = ({ kind, content }) => html`
+  <bd-p kind="${kind}">${content}</bd-p>
+`;
+
+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>
+      <bd-p kind="large">Large Paragraph - This is a large paragraph for emphasized content that needs more attention.</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>
+    
+    <div>
+      <bd-p kind="small">Small Paragraph - This is a small paragraph for secondary information, captions, or less important content.</bd-p>
+    </div>
+  </div>
+`;
+
+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>
+`;
+InCardContext.parameters = {
+  docs: {
+    description: {
+      story: 'Paragraph variants used within card components to demonstrate real-world usage patterns.'
+    }
+  }
+};
+
+export const MixedCardLayouts = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem;">
+    
+    <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>
+
+      <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>
+
+      <bd-card-item 
+        title="Web Protection" 
+        align="start"
+      >
+        <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-card-item>
+    </bd-card-section>
+
+    <bd-card-section title="Additional Features">
+      <bd-card-item 
+        title="Parental Control" 
+        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-card-item>
+
+      <bd-card-item 
+        title="File Encryption" 
+        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-card-item>
+    </bd-card-section>
+
+  </div>
+`;
+MixedCardLayouts.parameters = {
+  docs: {
+    description: {
+      story: 'Different card layouts showing various paragraph variants in context with centered and start-aligned content.'
+    }
+  }
+};
+
+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>
+`;
+CardWithDifferentParagraphStyles.parameters = {
+  docs: {
+    description: {
+      story: 'Cards demonstrating the use of different paragraph styles (lead, large, regular, small) for varied content hierarchy.'
+    }
+  }
+};
+
+export const Regular = Template.bind({});
+Regular.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.'
+};
+
+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>
+`;

package/src/components/picture/picture.js

@@ -0,0 +1,46 @@
+import { LitElement, html } from "lit";
+
+export class BdPicture extends LitElement {
+  static properties = {
+    sources    : { type: Array },
+    alt        : { type: String },
+    fallbackSrc: { type: String },
+    width      : { type: Number },
+    height     : { type: Number },
+    loading    : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.sources = [];
+    this.alt = "";
+    this.fallbackSrc = "";
+    this.width = null;
+    this.height = null;
+    this.loading = "lazy";
+  }
+
+  render() {
+    return html`
+      <picture>
+        ${this.sources.map(source => html`
+          <source 
+            type="${source.type}" 
+            srcset="${source.srcset}"
+            media="${source.media || ''}"
+            sizes="${source.sizes || ''}"
+          >
+        `)}
+        <img 
+          loading="${this.loading}" 
+          alt="${this.alt}" 
+          src="${this.fallbackSrc}"
+          width="${this.width}"
+          height="${this.height}"
+        >
+      </picture>
+    `;
+  }
+}
+
+customElements.define("bd-picture", BdPicture);

package/src/components/picture/picture.stories.js

@@ -0,0 +1,275 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import './picture.js';
+
+export default {
+  title    : 'Atoms/Picture',
+  component: 'bd-picture',
+  argTypes : {
+    sources: {
+      control    : 'object',
+      description: 'Array of source objects for responsive images'
+    },
+    alt: {
+      control    : 'text',
+      description: 'Alt text for accessibility'
+    },
+    fallbackSrc: {
+      control    : 'text',
+      description: 'Fallback image source for older browsers'
+    },
+    width: {
+      control    : 'number',
+      description: 'Image width attribute'
+    },
+    height: {
+      control    : 'number',
+      description: 'Image height attribute'
+    },
+    loading: {
+      control    : { type: 'select' },
+      options    : ['lazy', 'eager'],
+      description: 'Image loading strategy'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A responsive picture component that supports multiple image formats and breakpoints.'
+      }
+    }
+  }
+};
+
+const Template = (args) => html`
+  <bd-picture
+    .sources="${args.sources}"
+    alt="${args.alt}"
+    fallback-src="${args.fallbackSrc}"
+    width="${args.width}"
+    height="${args.height}"
+    loading="${args.loading}"
+  ></bd-picture>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  sources: [
+    {
+      type  : 'image/webp',
+      srcset: '/assets/bd-header-us-2000.webp',
+      media : '(min-width: 1200px)'
+    },
+    {
+      type  : 'image/webp',
+      srcset: '/assets/bd-header-us-1000.webp',
+      media : '(min-width: 768px)'
+    },
+    {
+      type  : 'image/webp',
+      srcset: '/assets/bd-header-us-750.webp'
+    }
+  ],
+  alt        : 'Bitdefender Security Illustration',
+  fallbackSrc: '/assets/bd-header-us.jpg',
+  width      : 750,
+  height     : 500,
+  loading    : 'lazy'
+};
+
+export const SimplePicture = Template.bind({});
+SimplePicture.args = {
+  sources: [
+    {
+      type  : 'image/jpeg',
+      srcset: '/assets/bd-header-us.jpg'
+    }
+  ],
+  alt        : 'Simple Bitdefender Security Image',
+  fallbackSrc: '/assets/bd-header-us.jpg',
+  width      : 750,
+  height     : 500,
+  loading    : 'eager'
+};
+
+export const WebPWithJPEGFallback = () => html`
+  <div style="max-width: 800px; margin: 0 auto;">
+    <bd-h as="h4">WebP with JPEG Fallback</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-2000.webp',
+          media : '(min-width: 1200px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-1000.webp',
+          media : '(min-width: 768px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-750.webp'
+        },
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us-2000.jpg',
+          media : '(min-width: 1200px)'
+        },
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us-1000.jpg',
+          media : '(min-width: 768px)'
+        }
+      ]}"
+      alt="Bitdefender Security with WebP and JPEG fallback"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="750"
+      height="500"
+      loading="eager"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Modern WebP format with JPEG fallback for maximum browser compatibility.
+    </p>
+  </div>
+`;
+
+export const DifferentBreakpoints = () => html`
+  <div style="max-width: 1000px; margin: 0 auto;">
+    <bd-h as="h4">Multiple Breakpoints</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-2000.webp',
+          media : '(min-width: 1440px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-1200.webp',
+          media : '(min-width: 1024px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-800.webp',
+          media : '(min-width: 768px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-600.webp',
+          media : '(min-width: 480px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-400.webp'
+        }
+      ]}"
+      alt="Bitdefender Security with multiple breakpoints"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="750"
+      height="500"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      This image loads different sizes at: 1440px+, 1024px+, 768px+, 480px+, and mobile.
+    </p>
+  </div>
+`;
+
+export const HeaderImageExample = () => html`
+  <div style="background: #f8fafc; padding: 2rem; border-radius: 8px; border: 1px solid #e2e8f0;">
+    <bd-h as="h4">Header Image Example</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-2000.webp',
+          media : '(min-width: 1200px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-1000.webp',
+          media : '(min-width: 768px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-750.webp'
+        }
+      ]}"
+      alt="Bitdefender Security Header Illustration"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="800"
+      height="400"
+      loading="eager"
+    ></bd-picture>
+    <div style="margin-top: 1rem; padding: 1rem; background: white; border-radius: 4px;">
+      <bd-h as="h4" style="margin: 0 0 0.5rem 0;">Bitdefender Ultimate Security</bd-h>
+      <p style="margin: 0; color: #666;">Complete protection for your digital life</p>
+    </div>
+  </div>
+`;
+
+export const SingleSourceExample = () => html`
+  <div style="max-width: 600px; margin: 0 auto;">
+    <bd-h as="h4">Single Source Picture</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us.jpg'
+        }
+      ]}"
+      alt="Simple Bitdefender Security Image"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="600"
+      height="400"
+      loading="lazy"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Simple picture with single JPEG source - perfect when you don't need multiple formats.
+    </p>
+  </div>
+`;
+
+export const WithFixedDimensions = () => html`
+  <div>
+    <bd-h as="h4">Fixed Dimensions</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us.jpg'
+        }
+      ]}"
+      alt="Bitdefender Security with fixed dimensions"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="400"
+      height="300"
+      loading="lazy"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Fixed 400x300 dimensions prevent layout shifts during loading.
+    </p>
+  </div>
+`;
+
+export const AccessibilityExample = () => html`
+  <div style="max-width: 600px; margin: 0 auto;">
+    <bd-h as="h4">Accessible Picture</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us.jpg'
+        }
+      ]}"
+      alt="Bitdefender Security Suite showing advanced protection features including real-time scanning, firewall protection, and privacy tools for comprehensive digital security"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="600"
+      height="400"
+      loading="lazy"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Always provide meaningful alt text for screen readers and SEO.
+    </p>
+  </div>
+`;