@repobit/dex-system-design 0.11.0 → 0.12.0

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

@@ -0,0 +1,73 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import carouselCSS from "../light-carousel/light-carousel-simple.css.js";
+
+class CustomLightCarouselSimple extends LitElement {
+  static properties = {
+    title: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+  }
+
+  render() {
+    return html`
+    <section class="bd-light-carousel-s">
+      ${this.title
+        ? html`
+            <div class="bd-header-light-carousel-s">
+              <h1 class="bd-section-title-s">${this.title}</h1>
+            </div>
+          `
+        : null}
+      <div class="bd-light-carousel-track-s">
+        <slot></slot>
+      </div>
+    </section>
+  `;
+  }
+
+}
+class LightCarouselSimpleItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    icon : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.icon = "";
+  }
+
+  render() {
+    return html`
+      <div class="bd-light-box-s">
+        <div class="bd-light-box-header-s">
+          ${this.icon
+            ? html`<img
+                src="${this.icon}"
+                alt="icon"
+                class="bd-light-icon-s"
+              />`
+            : ""}
+          ${this.title
+            ? html`
+                <div class="bd-light-title-badge-wrapper-s">
+                  <h3>${this.title}</h3>
+                </div>
+              `
+            : ""}
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+CustomLightCarouselSimple.styles = [tokens, carouselCSS];
+LightCarouselSimpleItem.styles = [tokens, carouselCSS];
+
+customElements.define("bd-light-carousel-simple-item", LightCarouselSimpleItem);
+customElements.define("bd-light-carousel-simple-section", CustomLightCarouselSimple);

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

@@ -7,23 +7,30 @@ export default css`
     --border-card-grey: var(--color-neutral-50);
   }
   .bd-section-title {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-semibold);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
     font-size: 2em;
   }
   .bd-header-light-carousel {
     margin-bottom: 50px;
     margin-top: 50px;
   }
+
   .bd-light-carousel {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     width: 100%;
-    margin: var(--size-0) auto;
+    margin: var(--spacing-0) auto;
     overflow: hidden;
     flex-direction: column;
+    padding-left: var(--spacing-14);
+    padding-right: var(--spacing-14);
+    max-width: 1400px;
+    margin: 0 auto;
+        padding-top: var(--spacing-32);
+
   }
   .bd-light-carousel-title {
     font-size: 28px;
@@ -35,12 +42,10 @@ export default css`
     letter-spacing: 0.5px;
   }
   .bd-light-carousel-track {
-    display: flex;
-    gap: 2em;
     scroll-behavior: smooth;
     flex: 1;
     position: relative;
-    padding: var(--size-0) var(--size-20);
+    padding: var(--spacing-0) var(--spacing-20);
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
@@ -48,61 +53,63 @@ export default css`
     z-index: 1;
     scroll-snap-type: x mandatory;
   }
-
+  .bd-light-carousel-track {
+    display: grid;
+    gap: 30px;
+    grid-template-columns: repeat(3, 1fr); /* default fix 3 */
+  }
   .bd-light-carousel-track::-webkit-scrollbar {
     display: none;
   }
 
   .bd-light-box {
-    flex: var(--size-0) var(--size-0) auto;
-    width: 450px;
+    flex: var(--spacing-0) var(--spacing-0) auto;
     background: var(--background-card-grey);
     border-radius: 28px;
-    border: var(--size-2) solid var(--border-card-grey);
-    padding: var(--size-32);
-    display: flex;
+    // border: var(--spacing-2) solid var(--border-card-grey);
+    padding: var(--spacing-32);
     flex-direction: column;
     align-items: start;
     justify-content: center;
     text-align: start;
     transition: transform 0.2s ease-in-out;
-    min-height: 155px;
+    min-height: 135px;
     position: relative;
     z-index: 2;
     scroll-snap-align: start;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-light-box h3 {
     font-size: var(--heading-xsmall);
-    margin: var(--size-0) var(--size-8) var(--size-8) var(--size-0);
+    margin: var(--spacing-0) var(--spacing-8) var(--spacing-8) var(--spacing-0);
     font-weight: 600;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-light-box p {
-    font-size: var(--size-16);
-    margin: var(--size-0) var(--size-0) 1em var(--size-0);
-    font-family: var(--font-family-sans);
+    font-size: var(--spacing-16);
+    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-light-icon {
     position: relative;
-    bottom: var(--size-6);
+    bottom: var(--spacing-6);
     max-width: 100%;
-    height: var(--size-32);
-    width: var(--size-32);
+    height: var(--spacing-32);
+    width: var(--spacing-32);
   }
   .bd-light-box-header {
     display: flex;
     align-items: center;
-    gap: var(--size-8);
+    gap: var(--spacing-8);
+  }
+  .bd-light-title-badge-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4, 4px);
   }
-    .bd-light-title-badge-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--size-4, 4px);
-}
 
   @media (max-width: 1024px) {
     .bd-light-box {
@@ -121,7 +128,7 @@ export default css`
     .bd-light-carousel-track {
       display: flex;
       flex-direction: column;
-      gap: var(--size-20);
+      gap: var(--spacing-20);
       overflow-x: hidden;
       overflow-y: hidden;
       scroll-behavior: smooth;
@@ -130,7 +137,7 @@ export default css`
     .bd-light-box {
       width: 100%;
       max-width: 400px;
-      margin: var(--size-0) auto;
+      margin: var(--spacing-0) auto;
     }
 
     .bd-arrow {
@@ -151,7 +158,19 @@ export default css`
       font-size: 0.9em;
     }
     .bd-light-icon {
-      bottom: var(--size-10);
+      bottom: var(--spacing-10);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .bd-light-carousel-track {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .bd-light-carousel-track {
+      grid-template-columns: 1fr;
     }
   }
 `;

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

@@ -12,66 +12,23 @@ class CustomLightCarousel extends LitElement {
     this.title = "";
   }
 
-  firstUpdated() {
-    this.updateArrowStates();
-  }
-
-  scrollCarousel(direction) {
-    const track = this.shadowRoot.querySelector(".bd-light-carousel-track");
-    const itemWidth = track.firstElementChild
-      ? track.firstElementChild.offsetWidth
-      : 300;
-    const trackWidth = track.offsetWidth;
-    const scrollPosition = track.scrollLeft;
-
-    if (direction === "left" && scrollPosition > 0) {
-      track.scrollBy({ left: -itemWidth, behavior: "smooth" });
-    } else if (
-      direction === "right" &&
-      scrollPosition + trackWidth < track.scrollWidth
-    ) {
-      track.scrollBy({ left: itemWidth, behavior: "smooth" });
-    }
-
-    this.updateArrowStates();
-  }
-
-  updateArrowStates() {
-    const track = this.shadowRoot.querySelector(".bd-light-carousel-track");
-    const leftArrow = this.shadowRoot.querySelector(".bd-light-left-arrow");
-    const rightArrow = this.shadowRoot.querySelector(".bd-light-right-arrow");
-
-    if (!track || !leftArrow || !rightArrow) return; // Nu face nimic dacă lipsește ceva
 
-    const trackWidth = track.offsetWidth;
-    const totalWidth = track.scrollWidth;
-    const scrollPosition = track.scrollLeft;
-
-    if (scrollPosition === 0) {
-      leftArrow.classList.add("bd-disabled");
-    } else {
-      leftArrow.classList.remove("bd-disabled");
-    }
-
-    if (scrollPosition + trackWidth >= totalWidth) {
-      rightArrow.classList.add("bd-disabled");
-    } else {
-      rightArrow.classList.remove("bd-disabled");
-    }
-  }
 
   render() {
     return html`
-      <section class="bd-light-carousel">
-        <div class="bd-header-light-carousel">
-          <h1 class="bd-section-title">${this.title}</h1>
-        </div>
-
-        <div class="bd-light-carousel-track">
-          <slot></slot>
-        </div>
-      </section>
-    `;
+    <section class="bd-light-carousel">
+      ${this.title
+        ? html`
+            <div class="bd-header-light-carousel">
+              <h1 class="bd-section-title">${this.title}</h1>
+            </div>
+          `
+        : null}
+      <div class="bd-light-carousel-track">
+        <slot></slot>
+      </div>
+    </section>
+  `;
   }
 }
 class LightCarouselItem extends LitElement {
@@ -101,7 +58,7 @@ class LightCarouselItem extends LitElement {
               <div class="bd-light-title-badge-wrapper">
                 ${this.title ? html`<h3>${this.title}</h3>` : ""}
                 ${this.badge
-                  ? html`<bd-badge text="${this.badge}" color="#026DFF"></bd-badge>`
+                  ? html`<bd-badge color="#026DFF">${this.badge}</bd-badge>`
                   : ""}
               </div>
             `

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

@@ -1,21 +1,22 @@
 import { html } from "lit";
+import "./light-carousel-simple.js";
 import "./light-carousel.js";
-import "../badge/badge.js"; // asigură-te că bd-badge este importat
+
+import "../badge/badge.js";
 
 export default {
-  title: "Components/Light Carousel",
-  component: "bd-light-carousel-section",
-  tags: ["autodocs"],
+  title   : "Components/Light Carousel",
+  tags    : ["autodocs"],
   argTypes: {
-    title: { control: "text" },
-  },
+    title: { control: "text" }
+  }
 };
 
 const Template = (args) => html`
   <bd-light-carousel-section title="${args.title}">
     <bd-light-carousel-item
       title="How does Bitdefender Internet Security protect me?"
-      icon="icons/light-carousel-img1.png"
+      icon="/assets/light-carousel-img1.png"
       badge="FAQ"
     >
       <p>Bitdefender Internet Security provides the best protection...</p>
@@ -24,14 +25,14 @@ const Template = (args) => html`
 
     <bd-light-carousel-item
       title="How to install Bitdefender on another device?"
-      icon="icons/light-carousel-img1.png"
+      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-light-carousel-item>
 
     <bd-light-carousel-item
       title="Can I transfer my license to a new computer?"
-      icon="icons/light-carousel-img1.png"
+      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>
@@ -41,5 +42,45 @@ const Template = (args) => html`
 
 export const Default = Template.bind({});
 Default.args = {
-  title: "Need help? We've got answers!",
+  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"
+    >
+      <p>
+        Specialized AI chatbot that helps you identify suspicious online
+        interactions so you don’t become a victim.
+      </p>
+    </bd-light-carousel-simple-item>
+
+    <bd-light-carousel-simple-item
+      title="Scam Wave Alerts"
+      icon="src/assets//assets/light-carousel-img1.png"
+    >
+      <p>
+        Stay informed with real-time alerts about ongoing scam outbreaks
+        detected in your area automatically.
+      </p>
+    </bd-light-carousel-simple-item>
+
+    <bd-light-carousel-simple-item
+      title="Online Scam Protection"
+      icon="src/assets//assets/light-carousel-img1.png"
+    >
+      <p>
+        Focused on browsing activities, it specializes in detecting the newest
+        scam patterns and tactics.
+      </p>
+    </bd-light-carousel-simple-item>
+  </bd-light-carousel-simple-section>
+`;
+
+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

@@ -0,0 +1,41 @@
+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);
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease;
+  }
+
+  .bd-link:hover {
+    text-decoration: underline;
+  }
+
+  .bd-link--underline {
+    text-decoration: underline;
+  }
+
+  .bd-link--secondary {
+    color: var(--color-link-secondary, #6c757d);
+  }
+
+  .bd-link--danger {
+    color: var(--color-link-danger, #dc3545);
+  }
+
+  .bd-link--disabled {
+    color: var(--color-link-disabled, #adb5bd);
+    pointer-events: none;
+    cursor: default;
+    text-decoration: none;
+  }
+`;

package/src/components/link/link.js

@@ -0,0 +1,54 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import linkCSS from "./link.css.js";
+
+class BdLink extends LitElement {
+  static properties = {
+    href     : { type: String },
+    target   : { type: String },
+    kind     : { type: String },
+    underline: { type: Boolean },
+    disabled : { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.href = "#";
+    this.target = "_self";
+    this.kind = "primary";
+    this.underline = false;
+    this.disabled = false;
+  }
+
+  static styles = [tokens, linkCSS];
+
+  render() {
+    const kindClass = {
+      primary  : "",
+      secondary: "bd-link--secondary",
+      danger   : "bd-link--danger"
+    }[this.kind] || "";
+
+    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}"
+        target="${this.target}"
+        @click="${this._handleClick}"
+      >
+        <slot></slot>
+      </a>
+    `;
+  }
+
+  _handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+  }
+}
+
+customElements.define("bd-link", BdLink);

package/src/components/modal/modal.css.js

@@ -0,0 +1,75 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    --bd-blue-color: var(--color-blue-500);
+    --bd-accesibility-focus: var(--color-blue-800);
+  }
+
+  .bd-modal {
+    position: fixed;
+    top: var(--spacing-0);
+    left: var(--spacing-0);
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    backdrop-filter: blur(var(--spacing-12));
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+ :host([open]) .bd-modal {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+  .bd-modal-content {
+    background: #fff;
+    padding: 2em;
+    border-radius: var(--spacing-12);
+    max-width: 500px;
+    text-align: start;
+    box-shadow: var(--spacing-0) var(--spacing-2) var(--spacing-8) rgba(0, 0, 0, 0.2);
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-modal-content h2 {
+    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-modal-content button {
+    margin-top: 1em;
+    padding: 0.5em 1em;
+    background: var(--bd-blue-color);
+    color: #fff;
+    border: none;
+    border-radius: var(--spacing-8);
+    cursor: pointer;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-modal-content button:focus-visible {
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
+  }
+
+  @media (max-width: 768px) {
+    .bd-modal-content {
+      max-width: 90%;
+      padding: 1.5em;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .bd-modal-content {
+      padding: 2em;
+    }
+  }
+`;

package/src/components/modal/modal.js

@@ -0,0 +1,41 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import modalCSS from "../modal/modal.css";
+
+export class BdModal extends LitElement {
+  static properties = {
+    open     : { type: Boolean, reflect: true },
+    title    : { type: String },
+    icon     : { type: String },
+    modalText: { type: String }
+  };
+
+
+
+  _onClose() {
+    this.dispatchEvent(new CustomEvent("close-modal", { bubbles: true, composed: true }));
+  }
+
+  render() {
+    return html`
+      <div class="bd-modal" @click="${this._onClose}" aria-hidden="${!this.open}">
+        <div
+          class="bd-modal-content"
+          @click="${(e) => e.stopPropagation()}"
+          aria-labelledby="modal-title"
+          aria-describedby="modal-description"
+        >
+          ${this.icon
+            ? html`<img src="${this.icon}" alt="icon" class="bd-carousel-modal-icon" />`
+            : ""}
+          <h2 id="modal-title">${this.title}</h2>
+<p id="modal-description">${this.modalText}</p>
+          <button @click="${this._onClose}" aria-label="Close modal">Close</button>
+        </div>
+      </div>
+    `;
+  }
+}
+BdModal.styles = [tokens, modalCSS];
+
+customElements.define("bd-modal", BdModal);

package/src/components/modal/modal.stories.js

@@ -0,0 +1,40 @@
+// src/stories/Modal.stories.js
+import { html } from "lit";
+import "../../components/modal/modal.js";
+
+export default {
+  title    : "Components/Modal",
+  component: "bd-modal",
+  argTypes : {
+    open     : { control: "boolean" },
+    title    : { control: "text" },
+    icon     : { control: "text" },
+    modalText: { control: "text" },
+    onClose  : { action: "close-modal" }
+  }
+};
+
+const Template = ({ open, title, icon, modalText, onClose }) => html`
+  <bd-modal
+    ?open=${open}
+    title=${title}
+    icon=${icon}
+    modalText=${modalText}
+    @close-modal=${onClose}
+  ></bd-modal>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  open     : true,
+  title    : "Example Modal",
+  icon     : "https://via.placeholder.com/40",
+  modalText: "This is a simple modal component."
+};
+
+export const Closed = Template.bind({});
+Closed.args = {
+  open     : false,
+  title    : "Closed Modal",
+  modalText: "You should not see this modal because it is closed."
+};

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

@@ -1,10 +1,8 @@
 import { css } from "lit";
 
 export default css`
-  
-  
 .bd-font-brand{
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
 }
 .bd-font-cod {
   font-family: var(--font-family-mono);