@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/heading/heading.stories.js

@@ -0,0 +1,260 @@
+import { html } from 'lit';
+import './heading.js';
+
+export default {
+  title    : 'Atoms/Heading',
+  component: 'bd-h',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'Heading level (h1-h6)'
+    },
+    content: {
+      control    : 'text',
+      description: 'Heading text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable heading component with semantic HTML and consistent typography.'
+      }
+    }
+  }
+};
+
+const Template = ({ kind, content }) => html`
+  <bd-h as="${kind}">${content}</bd-h>
+`;
+
+export const AllHeadings = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    <bd-h as="h1">Heading Level 1 - Main Title</bd-h>
+    <bd-h as="h2">Heading Level 2 - Section Title</bd-h>
+    <bd-h as="h3">Heading Level 3 - Subsection Title</bd-h>
+    <bd-h as="h4">Heading Level 4 - Card Title</bd-h>
+    <bd-h as="h5">Heading Level 5 - Small Heading</bd-h>
+    <bd-h as="h6">Heading Level 6 - Minor Heading</bd-h>
+  </div>
+`;
+AllHeadings.parameters = {
+  docs: {
+    description: {
+      story: 'All heading levels from h1 to h6 displayed together for comparison.'
+    }
+  }
+};
+
+export const Heading1 = Template.bind({});
+Heading1.args = {
+  kind   : 'h1',
+  content: 'Main Page Title (h1)'
+};
+Heading1.parameters = {
+  docs: {
+    description: {
+      story: 'Primary heading level for main page titles and important sections.'
+    }
+  }
+};
+
+export const Heading2 = Template.bind({});
+Heading2.args = {
+  kind   : 'h2',
+  content: 'Section Title (h2)'
+};
+Heading2.parameters = {
+  docs: {
+    description: {
+      story: 'Secondary heading level for major section titles.'
+    }
+  }
+};
+
+export const Heading3 = Template.bind({});
+Heading3.args = {
+  kind   : 'h3',
+  content: 'Subsection Title (h3)'
+};
+Heading3.parameters = {
+  docs: {
+    description: {
+      story: 'Tertiary heading level for subsection titles and card headers.'
+    }
+  }
+};
+
+export const Heading4 = Template.bind({});
+Heading4.args = {
+  kind   : 'h4',
+  content: 'Card Title (h4)'
+};
+Heading4.parameters = {
+  docs: {
+    description: {
+      story: 'Heading level for card titles, feature names, and smaller sections.'
+    }
+  }
+};
+
+export const Heading5 = Template.bind({});
+Heading5.args = {
+  kind   : 'h5',
+  content: 'Small Heading (h5)'
+};
+Heading5.parameters = {
+  docs: {
+    description: {
+      story: 'Small heading level for less important titles and labels.'
+    }
+  }
+};
+
+export const Heading6 = Template.bind({});
+Heading6.args = {
+  kind   : 'h6',
+  content: 'Minor Heading (h6)'
+};
+Heading6.parameters = {
+  docs: {
+    description: {
+      story: 'Smallest heading level for minor titles and captions.'
+    }
+  }
+};
+
+export const WithParagraphs = () => html`
+  <div style="max-width: 800px; margin: 0 auto;">
+    <bd-h as="h1">Product Features</bd-h>
+    <bd-p kind="regular">Discover all the powerful features that make our product stand out from the competition.</bd-p>
+    
+    <bd-h as="h2">Security Features</bd-h>
+    <bd-p kind="regular">Our advanced security features protect you from all types of online threats.</bd-p>
+    
+    <bd-h as="h3">Real-time Protection</bd-h>
+    <bd-p kind="regular">Continuous monitoring and protection against emerging threats.</bd-p>
+    
+    <bd-h as="h4">Behavioral Detection</bd-h>
+    <bd-p kind="regular">Advanced algorithms detect suspicious behavior patterns.</bd-p>
+    
+    <bd-h as="h5">System Requirements</bd-h>
+    <bd-p kind="small">Windows 10/11, 2GB RAM, 2.5GB free space</bd-p>
+  </div>
+`;
+WithParagraphs.parameters = {
+  docs: {
+    description: {
+      story: 'Headings used in context with paragraph components to demonstrate proper hierarchy.'
+    }
+  }
+};
+
+export const InCardLayout = () => html`
+  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem;">
+      <bd-h as="h3">Advanced Protection</bd-h>
+      <bd-p kind="regular">Comprehensive security against malware, ransomware, and online threats.</bd-p>
+    </div>
+    
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem;">
+      <bd-h as="h3">Privacy Features</bd-h>
+      <bd-p kind="regular">VPN, password manager, and webcam protection to keep your data safe.</bd-p>
+    </div>
+    
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem;">
+      <bd-h as="h3">Performance</bd-h>
+      <bd-p kind="regular">Lightweight design with minimal impact on system resources.</bd-p>
+    </div>
+  </div>
+`;
+InCardLayout.parameters = {
+  docs: {
+    description: {
+      story: 'Headings used in card layouts to demonstrate real-world usage patterns.'
+    }
+  }
+};
+
+export const AccessibilityExample = () => html`
+  <div style="max-width: 800px; margin: 0 auto;">
+    <bd-h as="h1">Accessibility Guidelines</bd-h>
+    <bd-p kind="regular">Proper heading hierarchy is essential for screen reader users and SEO.</bd-p>
+    
+    <bd-h as="h2">Semantic Structure</bd-h>
+    <bd-p kind="regular">Headings should follow a logical hierarchy without skipping levels.</bd-p>
+    
+    <bd-h as="h3">Best Practices</bd-h>
+    <bd-p kind="regular">Each page should have one h1, followed by h2, h3, etc. in order.</bd-p>
+    
+    <bd-h as="h4">Screen Readers</bd-h>
+    <bd-p kind="regular">Users can navigate by headings to understand page structure quickly.</bd-p>
+    
+    <bd-h as="h5">SEO Benefits</bd-h>
+    <bd-p kind="regular">Search engines use heading structure to understand content importance.</bd-p>
+  </div>
+`;
+AccessibilityExample.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates proper semantic heading hierarchy for accessibility and SEO.'
+    }
+  }
+};
+
+export const ResponsiveExample = () => html`
+  <div style="max-width: 100%; padding: 2rem;">
+    <bd-h as="h1">Responsive Design</bd-h>
+    <bd-p kind="regular">This heading will adjust its size based on the viewport and CSS variables.</bd-p>
+    
+    <div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem;">
+      <div style="flex: 1; min-width: 200px;">
+        <bd-h as="h3">Mobile First</bd-h>
+        <bd-p kind="small">Optimized for small screens with appropriate font sizes.</bd-p>
+      </div>
+      <div style="flex: 1; min-width: 200px;">
+        <bd-h as="h3">Tablet Ready</bd-h>
+        <bd-p kind="small">Scales perfectly for medium-sized devices.</bd-p>
+      </div>
+      <div style="flex: 1; min-width: 200px;">
+        <bd-h as="h3">Desktop Perfect</bd-h>
+        <bd-p kind="small">Looks great on large screens and monitors.</bd-p>
+      </div>
+    </div>
+  </div>
+`;
+ResponsiveExample.parameters = {
+  docs: {
+    description: {
+      story: 'Shows how headings work in responsive layouts and different screen sizes.'
+    }
+  }
+};
+
+export const InteractiveExample = () => {
+  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+  return html`
+    <div style="max-width: 800px; margin: 0 auto;">
+      <bd-h as="h2">Interactive Heading Demo</bd-h>
+      <bd-p kind="regular">Select different heading levels to see how they look:</bd-p>
+      
+      ${headings.map(kind => html`
+        <div style="margin: 2rem 0; padding: 1rem; border-left: 4px solid #3b82f6;">
+          <bd-h as="${kind}">This is a ${kind.toUpperCase()} heading</bd-h>
+          <bd-p kind="small" style="margin-top: 0.5rem;">
+            Font size: var(--typography-heading-${kind}-fontSize)<br>
+            Font weight: var(--typography-heading-${kind}-fontWeight)
+          </bd-p>
+        </div>
+      `)}
+    </div>
+  `;
+};
+InteractiveExample.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive demonstration showing all heading levels with their CSS variable values.'
+    }
+  }
+};

package/src/components/highlight/highlight.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import "./highlight.js";
 
 export default {
-  title    : "Atoms/Highlight [v2]",
+  title    : "Atoms/Highlight",
   component: "highlight",
   tags     : ["autodocs"],
   argTypes : {

package/src/components/image/image.css.js

@@ -0,0 +1,101 @@
+import { css } from "lit";
+
+export default css`
+@layer bd-components {
+  .bd-img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Object Fit Variants */
+  .bd-img.cover {
+    object-fit: cover;
+  }
+
+  .bd-img.contain {
+    object-fit: contain;
+  }
+
+  .bd-img.fill {
+    object-fit: fill;
+  }
+
+  .bd-img.none {
+    object-fit: none;
+  }
+
+  .bd-img.scale-down {
+    object-fit: scale-down;
+  }
+
+  /* Rounded Variants */
+  .bd-img.rounded {
+    border-radius: var(--spacing-8);
+  }
+
+  .bd-img.rounded-lg {
+    border-radius: var(--spacing-12);
+  }
+
+  .bd-img.rounded-full {
+    border-radius: 50%;
+  }
+
+  /* Shadow Variants */
+  .bd-img.shadow {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .bd-img.shadow-lg {
+    box-shadow: var(--shadow-lg);
+  }
+
+  .bd-img.shadow-xl {
+    box-shadow: var(--shadow-xl);
+  }
+
+  /* Border Variants */
+  .bd-img.bordered {
+    border: 2px solid var(--color-neutral-200);
+  }
+
+  .bd-img.bordered-primary {
+    border: 2px solid var(--color-blue-500);
+  }
+
+  .bd-img.bordered-thick {
+    border: 4px solid var(--color-neutral-300);
+  }
+
+  /* Responsive Behavior */
+  .bd-img.responsive {
+    width: 100%;
+    height: auto;
+  }
+
+  /* Aspect Ratio Containers */
+  .bd-img.aspect-16-9 {
+    aspect-ratio: 16 / 9;
+  }
+
+  .bd-img.aspect-4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  .bd-img.aspect-1-1 {
+    aspect-ratio: 1 / 1;
+  }
+
+  /* Hover Effects */
+  .bd-img.hover-zoom:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease;
+  }
+
+  .bd-img.hover-shadow:hover {
+    box-shadow: var(--shadow-lg);
+    transition: box-shadow 0.3s ease;
+  }
+};
+`

package/src/components/image/image.js

@@ -0,0 +1,57 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import imgCSS from "./image.css.js";
+
+export class BdImg extends LitElement {
+  static properties = {
+    src    : { type: String },
+    alt    : { type: String },
+    width  : { type: Number },
+    height : { type: Number },
+    loading: { type: String },
+    fit    : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.src = "";
+    this.alt = "";
+    this.width = null;
+    this.height = null;
+    this.loading = "lazy";
+    this.fit = "cover";
+  }
+
+  render() {
+    return html`
+      <img
+        src="${this.src}"
+        alt="${this.alt}"
+        width="${this.width}"
+        height="${this.height}"
+        loading="${this.loading}"
+        class="bd-img ${this.fit}"
+        @load="${this._handleLoad}"
+        @error="${this._handleError}"
+      />
+    `;
+  }
+
+  _handleLoad() {
+    this.dispatchEvent(new CustomEvent('image-loaded', {
+      bubbles : true,
+      composed: true
+    }));
+  }
+
+  _handleError() {
+    this.dispatchEvent(new CustomEvent('image-error', {
+      bubbles : true,
+      composed: true
+    }));
+  }
+
+  static styles = [tokens, imgCSS];
+}
+
+customElements.define("bd-img", BdImg);

package/src/components/image/image.stories.js

@@ -0,0 +1,245 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import './image.js';
+
+export default {
+  title    : 'Atoms/Image',
+  component: 'bd-img',
+  argTypes : {
+    src: {
+      control    : 'text',
+      description: 'Image source URL'
+    },
+    alt: {
+      control    : 'text',
+      description: 'Alt text for accessibility'
+    },
+    width: {
+      control    : 'number',
+      description: 'Image width'
+    },
+    height: {
+      control    : 'number',
+      description: 'Image height'
+    },
+    loading: {
+      control    : { type: 'select' },
+      options    : ['lazy', 'eager'],
+      description: 'Loading strategy'
+    },
+    fit: {
+      control    : { type: 'select' },
+      options    : ['cover', 'contain', 'fill', 'none', 'scale-down'],
+      description: 'Object fit property'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A simple image component with enhanced styling and event handling.'
+      }
+    }
+  }
+};
+
+const Template = (args) => html`
+  <bd-img
+    src="${args.src}"
+    alt="${args.alt}"
+    width="${args.width}"
+    height="${args.height}"
+    loading="${args.loading}"
+    fit="${args.fit}"
+  ></bd-img>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  src    : '/assets/bd-header-us.jpg',
+  alt    : 'Bitdefender Security Illustration',
+  width  : 750,
+  height : 500,
+  loading: 'lazy',
+  fit    : 'cover'
+};
+
+export const HeaderImageExample = Template.bind({});
+HeaderImageExample.args = {
+  src    : '/assets/bd-header-us.jpg',
+  alt    : 'Bitdefender Ultimate Security Header',
+  width  : 750,
+  height : 500,
+  loading: 'eager',
+  fit    : 'cover'
+};
+
+export const ObjectFitExamples = () => html`
+  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 800px;">
+    <div>
+      <bd-h as="h4">Cover</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Cover fit example"
+        width="200"
+        height="200"
+        fit="cover"
+      ></bd-img>
+      <p style="font-size: 0.875rem; color: #666; margin-top: 0.5rem;">
+        Fills container, may crop - perfect for headers
+      </p>
+    </div>
+    
+    <div>
+      <bd-h as="h4">Contain</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Contain fit example"
+        width="200"
+        height="200"
+        fit="contain"
+      ></bd-img>
+      <p style="font-size: 0.875rem; color: #666; margin-top: 0.5rem;">
+        Fits entirely, may have empty space
+      </p>
+    </div>
+    
+    <div>
+      <bd-h as="h4">Fill</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Fill fit example"
+        width="200"
+        height="200"
+        fit="fill"
+      ></bd-img>
+      <p style="font-size: 0.875rem; color: #666; margin-top: 0.5rem;">
+        Stretches to fill container - may distort
+      </p>
+    </div>
+    
+    <div>
+      <bd-h as="h4">Scale Down</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Scale down fit example"
+        width="200"
+        height="200"
+        fit="scale-down"
+      ></bd-img>
+      <p style="font-size: 0.875rem; color: #666; margin-top: 0.5rem;">
+        Like contain, but never scales up
+      </p>
+    </div>
+  </div>
+`;
+
+export const StylingVariants = () => html`
+  <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: start;">
+    <div style="text-align: center;">
+      <bd-h as="h4">Rounded</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Rounded security image"
+        width="150"
+        height="100"
+        fit="cover"
+        class="rounded"
+      ></bd-img>
+    </div>
+    
+    <div style="text-align: center;">
+      <bd-h as="h4">With Shadow</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Image with shadow"
+        width="150"
+        height="100"
+        fit="cover"
+        class="shadow-lg"
+      ></bd-img>
+    </div>
+    
+    <div style="text-align: center;">
+      <bd-h as="h4">Bordered</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Bordered image"
+        width="150"
+        height="100"
+        fit="cover"
+        class="bordered-primary"
+      ></bd-img>
+    </div>
+  </div>
+`;
+
+export const LoadingExamples = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 600px;">
+    <div>
+      <bd-h as="h4">Lazy Loading</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Lazy loaded security image"
+        width="400"
+        height="250"
+        loading="lazy"
+        fit="cover"
+      ></bd-img>
+      <p style="font-size: 0.875rem; color: #666; margin-top: 0.5rem;">
+        Loads when image enters viewport - better for performance
+      </p>
+    </div>
+    
+    <div>
+      <bd-h as="h4">Eager Loading</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Eager loaded security image"
+        width="400"
+        height="250"
+        loading="eager"
+        fit="cover"
+      ></bd-img>
+      <p style="font-size: 0.875rem; color: #666; margin-top: 0.5rem;">
+        Loads immediately - use for header images
+      </p>
+    </div>
+  </div>
+`;
+
+export const ResponsiveSizes = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 800px;">
+    <div>
+      <bd-h as="h4">Small (400px)</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Small security image"
+        width="400"
+        height="250"
+        fit="cover"
+      ></bd-img>
+    </div>
+    
+    <div>
+      <bd-h as="h4">Medium (600px)</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Medium security image"
+        width="600"
+        height="375"
+        fit="cover"
+      ></bd-img>
+    </div>
+    
+    <div>
+      <bd-h as="h4">Large (750px - Original)</bd-h>
+      <bd-img
+        src="/assets/bd-header-us.jpg"
+        alt="Large security image"
+        width="750"
+        height="500"
+        fit="cover"
+      ></bd-img>
+    </div>
+  </div>
+`;

package/src/components/light-carousel/light-carousel-simple.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
 import carouselCSS from "../light-carousel/light-carousel-simple.css.js";
 
 class CustomLightCarouselSimple extends LitElement {
@@ -56,7 +57,7 @@ class LightCarouselSimpleItem extends LitElement {
           ${this.title
             ? html`
                 <div class="bd-light-title-badge-wrapper-s">
-                  <h3>${this.title}</h3>
+                  <bd-h as="h4">${this.title}</bd-h>
                 </div>
               `
             : ""}
@@ -70,4 +71,4 @@ CustomLightCarouselSimple.styles = [tokens, carouselCSS];
 LightCarouselSimpleItem.styles = [tokens, carouselCSS];
 
 customElements.define("bd-light-carousel-simple-item", LightCarouselSimpleItem);
-customElements.define("bd-light-carousel-simple-section", CustomLightCarouselSimple);
+customElements.define("bd-light-carousel-simple-section", CustomLightCarouselSimple);