@repobit/dex-system-design 0.20.0 → 0.21.0

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);

package/src/components/light-carousel/light-carousel.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.css.js";
 
 class CustomLightCarousel extends LitElement {
@@ -12,8 +13,6 @@ class CustomLightCarousel extends LitElement {
     this.title = "";
   }
 
-
-
   render() {
     return html`
     <section class="bd-light-carousel">
@@ -56,7 +55,7 @@ class LightCarouselItem extends LitElement {
         ${this.title || this.badge
           ? html`
               <div class="bd-light-title-badge-wrapper">
-                ${this.title ? html`<h3>${this.title}</h3>` : ""}
+                ${this.title ? html`<bd-h as="h6" padding="10px 0" fontWeight="700">${this.title}</bd-h>` : ""}
                 ${this.badge
                   ? html`<bd-badge color="#026DFF">${this.badge}</bd-badge>`
                   : ""}
@@ -68,12 +67,9 @@ class LightCarouselItem extends LitElement {
     </div>
   `;
   }
-
-
 }
 CustomLightCarousel.styles = [tokens, carouselCSS];
 LightCarouselItem.styles = [tokens, carouselCSS];
 
 customElements.define("bd-light-carousel-item", LightCarouselItem);
-
-customElements.define("bd-light-carousel-section", CustomLightCarousel);
+customElements.define("bd-light-carousel-section", CustomLightCarousel);

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

@@ -19,15 +19,15 @@ const Template = (args) => html`
       icon="/assets/light-carousel-img1.png"
       badge="FAQ"
     >
-      <p>Bitdefender Internet Security provides the best protection...</p>
-      <p>Advanced AI and behavior-based detection ensure safety online and offline.</p>
+      <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
+      <bd-p kind="small">Advanced AI and behavior-based detection ensure safety online and offline.</bd-p>
     </bd-light-carousel-item>
 
     <bd-light-carousel-item
       title="How to install Bitdefender on another device?"
       icon="/assets/light-carousel-img1.png"
     >
-      <p>You can install Bitdefender on other devices by logging into your Central account and using the 'My Devices' tab.</p>
+      <bd-p kind="small">You can install Bitdefender on other devices by logging into your Central account and using the 'My Devices' tab.</bd-p>
     </bd-light-carousel-item>
 
     <bd-light-carousel-item
@@ -35,7 +35,7 @@ const Template = (args) => html`
       icon="/assets/light-carousel-img1.png"
       badge="How To"
     >
-      <p>Yes, just remove the license from the old device via Central and activate it on the new one.</p>
+      <bd-p kind="small">Yes, just remove the license from the old device via Central and activate it on the new one.</bd-p>
     </bd-light-carousel-item>
   </bd-light-carousel-section>
 `;
@@ -45,37 +45,36 @@ Default.args = {
   title: "Need help? We've got answers!"
 };
 
-// NEW: Simple version
 const TemplateSimple = (args) => html`
   <bd-light-carousel-simple-section title="${args.title}">
     <bd-light-carousel-simple-item
       title="Scam Copilot Chatbot"
       icon="/assets/light-carousel-img1.png"
     >
-      <p>
+      <bd-p kind="small">
         Specialized AI chatbot that helps you identify suspicious online
-        interactions so you don’t become a victim.
-      </p>
+        interactions so you don't become a victim.
+      </bd-p>
     </bd-light-carousel-simple-item>
 
     <bd-light-carousel-simple-item
       title="Scam Wave Alerts"
       icon="/assets/light-carousel-img1.png"
     >
-      <p>
+      <bd-p kind="small">
         Stay informed with real-time alerts about ongoing scam outbreaks
         detected in your area automatically.
-      </p>
+      </bd-p>
     </bd-light-carousel-simple-item>
 
     <bd-light-carousel-simple-item
       title="Online Scam Protection"
       icon="/assets/light-carousel-img1.png"
     >
-      <p>
+      <bd-p kind="small">
         Focused on browsing activities, it specializes in detecting the newest
         scam patterns and tactics.
-      </p>
+      </bd-p>
     </bd-light-carousel-simple-item>
   </bd-light-carousel-simple-section>
 `;
@@ -83,4 +82,4 @@ const TemplateSimple = (args) => html`
 export const Simple = TemplateSimple.bind({});
 Simple.args = {
   title: "Our AI-powered platform that detects and fights scams. In real time."
-};
+};

package/src/components/link/link.css.js

@@ -1,41 +1,130 @@
 import { css } from "lit";
 
 export default css`
-  :host {
-    display: inline-block;
-        font-family: var(--typography-fontFamily-sans);
-
-  }
-
   .bd-link {
-    font-family: inherit;
-    font-size: 1rem;
-    color: var(--color-link-primary, #007bff);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-4);
+    color: var(--color-blue-500);
     text-decoration: none;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-base);
+    font-weight: var(--typography-fontWeight-normal);
+    line-height: var(--typography-lineHeight-normal);
+    transition: all 0.15s ease-in-out;
     cursor: pointer;
-    transition: color 0.2s ease;
   }
 
-  .bd-link:hover {
-    text-decoration: underline;
+  /* Primary (default) */
+  .bd-link--primary {
+    color: var(--color-blue-500);
   }
 
-  .bd-link--underline {
+  .bd-link--primary:hover {
+    color: var(--color-blue-700);
     text-decoration: underline;
+    text-underline-offset: 2px;
   }
 
+  /* Secondary */
   .bd-link--secondary {
-    color: var(--color-link-secondary, #6c757d);
+    color: var(--color-neutral-600);
+  }
+
+  .bd-link--secondary:hover {
+    color: var(--color-neutral-800);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Light variant for dark backgrounds */
+  .bd-link--light {
+    color: var(--color-neutral-0);
+  }
+
+  .bd-link--light:hover {
+    color: var(--color-neutral-0); /* Rămâne albă */
+    text-decoration: none; /* Fără underline */
   }
 
+  /* Danger */
   .bd-link--danger {
-    color: var(--color-link-danger, #dc3545);
+    color: var(--color-red-500);
+  }
+
+  .bd-link--danger:hover {
+    color: var(--color-red-700);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Subtle */
+  .bd-link--subtle {
+    color: var(--color-neutral-500);
+    text-decoration: none;
+  }
+
+  .bd-link--subtle:hover {
+    color: var(--color-neutral-700);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Bold */
+  .bd-link--bold {
+    color: var(--color-blue-600);
+    font-weight: var(--typography-fontWeight-semibold);
+    text-decoration: none;
   }
 
+  .bd-link--bold:hover {
+    color: var(--color-blue-800);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Underline modifier */
+  .bd-link--underline {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .bd-link--underline:hover {
+    text-decoration-thickness: 2px;
+  }
+
+  /* Disabled state */
   .bd-link--disabled {
-    color: var(--color-link-disabled, #adb5bd);
+    color: var(--color-neutral-400);
+    cursor: not-allowed;
+    text-decoration: none;
     pointer-events: none;
+  }
+
+
+  /* Focus styles for all variants */
+  .bd-link:focus {
+    outline: 2px solid var(--color-blue-300);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  /* Ensure disabled span has same display */
+  .bd-link.bd-link--disabled {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* Additional specificity for edge cases */
+  a.bd-link {
+    cursor: pointer;
+  }
+
+  span.bd-link {
     cursor: default;
-    text-decoration: none;
   }
-`;
+
+  span.bd-link--disabled {
+    cursor: not-allowed;
+  }
+`;

package/src/components/link/link.js

@@ -6,8 +6,8 @@ class BdLink extends LitElement {
   static properties = {
     href     : { type: String },
     target   : { type: String },
-    kind     : { type: String },
-    underline: { type: Boolean },
+    kind     : { type: String, reflect: true },
+    underline: { type: Boolean, reflect: true },
     disabled : { type: Boolean, reflect: true }
   };
 
@@ -23,18 +23,22 @@ class BdLink extends LitElement {
   static styles = [tokens, linkCSS];
 
   render() {
-    const kindClass = {
-      primary  : "",
-      secondary: "bd-link--secondary",
-      danger   : "bd-link--danger"
-    }[this.kind] || "";
+    const kindClass = `bd-link--${this.kind}`;
+    const underlineClass = this.underline ? "bd-link--underline" : "";
+    const disabledClass = this.disabled ? "bd-link--disabled" : "";
+
+    if (this.disabled) {
+      return html`
+        <span class="bd-link ${kindClass} ${underlineClass} ${disabledClass}">
+          <slot></slot>
+        </span>
+      `;
+    }
 
     return html`
       <a
-        class="bd-link ${kindClass} ${this.underline ? "bd-link--underline" : ""} ${this.disabled
-          ? "bd-link--disabled"
-          : ""}"
-        href="${this.disabled ? "javascript:void(0)" : this.href}"
+        class="bd-link ${kindClass} ${underlineClass} ${disabledClass}"
+        href="${this.href}"
         target="${this.target}"
         @click="${this._handleClick}"
       >
@@ -51,4 +55,4 @@ class BdLink extends LitElement {
   }
 }
 
-customElements.define("bd-link", BdLink);
+customElements.define("bd-link", BdLink);