@repobit/dex-system-design 0.19.2 → 0.21.0

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="src/assets//assets/light-carousel-img1.png"
+      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="src/assets//assets/light-carousel-img1.png"
+      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="src/assets//assets/light-carousel-img1.png"
+      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);

package/src/components/link/link.stories.js

@@ -0,0 +1,177 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import '../paragraph/paragraph.js';
+import './link.js';
+
+export default {
+  title    : 'Atoms/Link',
+  component: 'bd-link',
+  argTypes : {
+    href: {
+      control    : 'text',
+      description: 'URL destination'
+    },
+    target: {
+      control    : { type: 'select' },
+      options    : ['_self', '_blank', '_parent', '_top'],
+      description: 'Link target attribute'
+    },
+    kind: {
+      control    : { type: 'select' },
+      options    : ['primary', 'secondary', 'danger', 'subtle', 'bold'],
+      description: 'Link style variant'
+    },
+    underline: {
+      control    : 'boolean',
+      description: 'Always show underline'
+    },
+    disabled: {
+      control    : 'boolean',
+      description: 'Disabled state'
+    },
+    content: {
+      control    : 'text',
+      description: 'Link text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable link component with multiple style variants and accessibility features.'
+      }
+    }
+  }
+};
+
+const Template = ({ href, target, kind, underline, disabled, content }) => html`
+  <bd-link 
+    href="${href}"
+    target="${target}"
+    kind="${kind}"
+    ?underline="${underline}"
+    ?disabled="${disabled}"
+  >
+    ${content}
+  </bd-link>
+`;
+
+export const AllVariants = () => html`
+  <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 600px;">
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary">primary link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="secondary">secondary link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="danger">danger link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="subtle">subtle link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="bold">bold link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary" underline>underlined link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary" disabled>disabled link</bd-link> inside the text.</bd-p>
+    </div>
+  </div>
+`;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'primary',
+  underline: false,
+  disabled : false,
+  content  : 'Primary Link'
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'secondary',
+  underline: false,
+  disabled : false,
+  content  : 'Secondary Link'
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'danger',
+  underline: false,
+  disabled : false,
+  content  : 'Danger Link'
+};
+
+export const WithUnderline = Template.bind({});
+WithUnderline.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'primary',
+  underline: true,
+  disabled : false,
+  content  : 'Underlined Link'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'primary',
+  underline: false,
+  disabled : true,
+  content  : 'Disabled Link'
+};
+
+export const ExternalLinks = () => html`
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <bd-link href="https://example.com" target="_blank" kind="primary">
+      External Primary Link
+    </bd-link>
+    
+    <bd-link href="https://example.com" target="_blank" kind="secondary" underline>
+      External Underlined Link
+    </bd-link>
+    
+    <bd-p kind="regular">
+      This is a paragraph with an <bd-link href="https://example.com" target="_blank" kind="primary">external link</bd-link> that opens in a new tab.
+    </bd-p>
+  </div>
+`;
+
+export const InContext = () => html`
+  <div style="max-width: 600px;">
+    <bd-h as="h2">Cybersecurity Features</bd-h>
+    
+    <bd-p kind="lead">
+      Protect your digital life with our comprehensive security solutions. 
+      Learn more about <bd-link href="#" kind="primary">threat protection</bd-link> 
+      and <bd-link href="#" kind="bold">advanced features</bd-link>.
+    </bd-p>
+    
+    <bd-p kind="regular">
+      Our <bd-link href="#" kind="danger">emergency response</bd-link> team is available 24/7 
+      to handle security incidents. For less urgent matters, check our 
+      <bd-link href="#" kind="subtle">knowledge base</bd-link>.
+    </bd-p>
+    
+    <bd-p kind="small">
+      <bd-link href="#" kind="secondary" underline>Terms of service</bd-link> • 
+      <bd-link href="#" kind="secondary" underline>Privacy policy</bd-link>
+    </bd-p>
+  </div>
+`;

package/src/components/list/list-item/list-item.css.js

@@ -0,0 +1,106 @@
+import { css } from "lit";
+
+export default css`
+@layer bd-components {
+  .bd-list-item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+    color: var(--color-neutral-700);
+    line-height: var(--typography-lineHeight-normal);
+  }
+
+  /* === SIZE VARIANTS === */
+  
+  .bd-list-item.sm {
+    font-size: var(--typography-fontSize-sm);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .bd-list-item.md {
+    font-size: var(--typography-fontSize-base);
+    margin-bottom: var(--spacing-6);
+  }
+
+  .bd-list-item.lg {
+    font-size: var(--typography-fontSize-lg);
+    margin-bottom: var(--spacing-8);
+  }
+
+  /* === MARKER STYLES === */
+  
+  .bd-list-item-marker {
+    flex-shrink: 0;
+    margin-top: var(--spacing-6);
+  }
+
+  /* Bullet List */
+  .bd-list-item.bullet .bd-list-item-marker {
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+    background-color: var(--color-neutral-1000);
+    border-radius: 50%;
+  }
+
+  /* Number List */
+  .bd-list-item.number {
+    counter-increment: bd-list-counter;
+  }
+
+  .bd-list-item.number .bd-list-item-marker::before {
+    content: counter(bd-list-counter) ".";
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-1000);
+  }
+
+  /* Check List */
+  .bd-list-item.check .bd-list-item-marker {
+    width: var(--spacing-16);
+    height: var(--spacing-16);
+    background-color: var(--color-green-500);
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .bd-list-item.check .bd-list-item-marker::after {
+    content: "✓";
+    color: white;
+    font-size: var(--typography-fontSize-sm);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* Custom Icon */
+  .bd-list-item-custom-icon {
+    width: var(--spacing-16);
+    height: var(--spacing-16);
+    flex-shrink: 0;
+    margin-top: var(--spacing-4);
+  }
+
+  /* No Marker */
+  .bd-list-item.none {
+    gap: 0;
+  }
+
+  .bd-list-item.none .bd-list-item-marker {
+    display: none;
+  }
+
+  /* === CONTENT STYLING === */
+  
+  .bd-list-item-content {
+    flex: 1;
+  }
+
+  /* Last Item */
+  .bd-list-item:last-child {
+    margin-bottom: 0;
+  }
+}
+`;

package/src/components/list/list-item/list-item.js

@@ -0,0 +1,43 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../../tokens/tokens.js";
+import listItemCSS from "./list-item.css.js";
+
+export class BdListItem extends LitElement {
+  static properties = {
+    kind: { type: String }, // bullet, number, check, none
+    size: { type: String }, // sm, md, lg
+    icon: { type: String }  // custom icon URL
+  };
+
+  constructor() {
+    super();
+    this.kind = "bullet";
+    this.size = "md";
+    this.icon = "";
+  }
+
+  render() {
+    return html`
+      <li class="bd-list-item ${this.kind} ${this.size}">
+        ${this._renderMarker()}
+        <span class="bd-list-item-content">
+          <slot></slot>
+        </span>
+      </li>
+    `;
+  }
+
+  _renderMarker() {
+    if (this.kind === "none") return '';
+
+    if (this.icon) {
+      return html`<img src="${this.icon}" alt="" class="bd-list-item-custom-icon" />`;
+    }
+
+    return html`<span class="bd-list-item-marker"></span>`;
+  }
+
+  static styles = [tokens, listItemCSS];
+}
+
+customElements.define("bd-li", BdListItem);