@repobit/dex-system-design 0.2.0

package/src/components/carousel/carousel.js

@@ -0,0 +1,226 @@
+import { LitElement, html } from "lit";
+import carouselCSS from "../carousel/carousel.css.js";
+
+class CarouselItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    subTitle: { type: String },
+    modalText: { type: String },
+    icon: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.subTitle = "";
+    this.modalText = "";
+    this.icon = "";
+  }
+
+  render() {
+    return html`
+      <div class="bd-box">
+        ${this.icon
+          ? html`<img src="${this.icon}" alt="icon" class="bd-carousel-icon" />`
+          : ""}
+        ${this.title ? html`<h3>${this.title}</h3>` : ""}
+        ${this.subTitle ? html`<p>${this.subTitle}</p>` : ""}
+        <div
+          class="bd-plus-button"
+          @click="${() =>
+            this.dispatchEvent(
+              new CustomEvent("open-modal", {
+                detail: {
+                  title: this.title,
+                  modalText: this.modalText,
+                  icon: this.icon,
+                },
+                bubbles: true,
+                composed: true,
+              })
+            )}"
+        ></div>
+      </div>
+    `;
+  }
+}
+
+class CustomCarousel extends LitElement {
+  static properties = {
+    selectedItem: { type: Object },
+  };
+
+  constructor() {
+    super();
+    this.selectedItem = null;
+  }
+
+  firstUpdated() {
+    const track = this.shadowRoot.querySelector(".bd-carousel-track");
+    const slot = this.shadowRoot.querySelector("slot");
+
+    // Ascultă scroll ca să actualizezi săgețile
+    track.addEventListener("scroll", () => this.updateArrowStates());
+
+    // Ascultă schimbările din slot
+    slot.addEventListener("slotchange", () => {
+      this.waitForImagesToLoad().then(() => {
+        this.updateArrowStates();
+      });
+    });
+
+    // Așteaptă un layout complet înainte de prima verificare
+    setTimeout(() => {
+      this.waitForImagesToLoad().then(() => {
+        this.updateArrowStates();
+      });
+    }, 0);
+
+    const arrows = this.shadowRoot.querySelectorAll(".bd-arrow");
+    arrows.forEach((arrow) => {
+      arrow.addEventListener("mousedown", () =>
+        arrow.classList.add("bd-active")
+      );
+      arrow.addEventListener("mouseup", () =>
+        arrow.classList.remove("bd-active")
+      );
+      arrow.addEventListener("mouseleave", () =>
+        arrow.classList.remove("bd-active")
+      );
+    });
+
+    this.addEventListener("open-modal", (e) => this.openModal(e.detail));
+  }
+
+  waitForImagesToLoad() {
+    const assignedElements = this.shadowRoot
+      .querySelector("slot")
+      .assignedElements({ flatten: true });
+
+    const images = assignedElements
+      .map((el) => el.shadowRoot?.querySelector("img"))
+      .filter((img) => img);
+
+    const promises = images.map(
+      (img) =>
+        new Promise((resolve) => {
+          if (img.complete) {
+            resolve();
+          } else {
+            img.addEventListener("load", resolve, { once: true });
+            img.addEventListener("error", resolve, { once: true }); // în caz de eroare de încărcare
+          }
+        })
+    );
+
+    return Promise.all(promises);
+  }
+
+  scrollCarousel(direction) {
+    const slot = this.shadowRoot.querySelector("slot");
+    const assignedElements = slot.assignedElements({ flatten: true });
+
+    if (!assignedElements.length) {
+      console.warn("No items found in slot!");
+      return;
+    }
+
+    const itemWidth = assignedElements[0].offsetWidth || 300;
+    const track = this.shadowRoot.querySelector(".bd-carousel-track");
+
+    if (!track) {
+      console.warn("No track found!");
+      return;
+    }
+
+    if (direction === "left") {
+      track.scrollBy({ left: -itemWidth, behavior: "smooth" });
+    } else if (direction === "right") {
+      track.scrollBy({ left: itemWidth, behavior: "smooth" });
+    }
+
+    // Așteaptă animația scroll-ului și actualizează săgețile
+    setTimeout(() => this.updateArrowStates(), 300);
+  }
+
+  updateArrowStates() {
+    const track = this.shadowRoot.querySelector(".bd-carousel-track");
+    const trackWidth = track.offsetWidth;
+    const totalWidth = track.scrollWidth;
+    const scrollPosition = track.scrollLeft;
+
+    const leftArrow = this.shadowRoot.querySelector(".bd-left-arrow");
+    const rightArrow = this.shadowRoot.querySelector(".bd-right-arrow");
+
+    if (!leftArrow || !rightArrow) return;
+
+    if (scrollPosition <= 0) {
+      leftArrow.classList.add("bd-disabled");
+    } else {
+      leftArrow.classList.remove("bd-disabled");
+    }
+
+    if (scrollPosition + trackWidth >= totalWidth - 1) {
+      rightArrow.classList.add("bd-disabled");
+    } else {
+      rightArrow.classList.remove("bd-disabled");
+    }
+  }
+
+  openModal(item) {
+    this.selectedItem = item;
+  }
+
+  closeModal() {
+    this.selectedItem = null;
+  }
+
+  render() {
+    return html`
+      <div class="bd-carousel">
+        <div class="bd-header-carousel">
+          <h1 class="bd-section-title">${this.title}</h1>
+        </div>
+        <img
+          alt="Left Arrow"
+          class="bd-arrow bd-left-arrow"
+          @click="${() => this.scrollCarousel("left")}"
+        />
+        <div class="bd-carousel-track">
+          <slot></slot>
+        </div>
+        <img
+          alt="Right Arrow"
+          class="bd-arrow bd-right-arrow"
+          @click="${() => this.scrollCarousel("right")}"
+        />
+      </div>
+
+      ${this.selectedItem
+        ? html`
+            <div class="bd-modal" @click="${this.closeModal}" ?open="${true}">
+              <div
+                class="bd-modal-content"
+                @click="${(e) => e.stopPropagation()}"
+              >
+                <img
+                  src="${this.selectedItem.icon}"
+                  alt="icon"
+                  class="bd-carousel-modal-icon"
+                />
+                <h2>${this.selectedItem.title}</h2>
+                <p>${this.selectedItem.modalText}</p>
+                <button @click="${this.closeModal}">Close</button>
+              </div>
+            </div>
+          `
+        : ""}
+    `;
+  }
+}
+
+CarouselItem.styles = [carouselCSS];
+CustomCarousel.styles = [carouselCSS];
+
+customElements.define("bd-carousel-item", CarouselItem);
+customElements.define("bd-carousel-section", CustomCarousel);

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

@@ -0,0 +1,73 @@
+import { html } from 'lit';
+import './carousel.js';
+
+export default {
+  title: 'Components/Carousel Section',
+  component: 'bd-carousel-section',
+  tags: ['autodocs'],
+};
+
+const Template = (args) => html`
+  <bd-carousel-section title=${args.title}>
+    <bd-carousel-item
+      title="Scam Copilot Bot"
+      subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
+      modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+
+    <bd-carousel-item
+      title="Scam Wave Alerts"
+      subTitle="Proactively informs you about scam outbreaks in your region"
+      modalText="Proactively informs you about scam outbreaks in your region"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+
+    <bd-carousel-item
+      title="AI-Powered Scam Check"
+      subTitle="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
+      modalText="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+
+    <bd-carousel-item
+      title="Educational Resources"
+      subTitle="Access a wealth of information and best practices to stay informed and vigilant against scams"
+      modalText="Access a wealth of information and best practices to stay informed and vigilant against scams"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+
+    <bd-carousel-item
+      title="Phishing Simulator"
+      subTitle="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
+      modalText="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+
+    <bd-carousel-item
+      title="Real-Time Scam Updates"
+      subTitle="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
+      modalText="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+
+    <bd-carousel-item
+      title="Community Reporting Hub"
+      subTitle="A platform where users can report scams and share experiences to help protect others"
+      modalText="A platform where users can report scams and share experiences to help protect others"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+
+    <bd-carousel-item
+      title="Fraud Prevention Workshops"
+      subTitle="Interactive workshops that educate users on identifying and avoiding scams"
+      modalText="Interactive workshops that educate users on identifying and avoiding scams"
+      icon="src/assets/icons/light-carousel-img1.png"
+    ></bd-carousel-item>
+  </bd-carousel-section>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Need help? We've got answers!",
+};

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

@@ -0,0 +1,149 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+  }
+  .bd-section-title {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-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;
+    overflow: hidden;
+    flex-direction: column;
+  }
+  .bd-light-carousel-title {
+    font-size: 28px;
+    font-weight: 700;
+    text-align: center;
+    color: #e4002b; /* roșu Bitdefender */
+    margin-bottom: 32px;
+    text-transform: uppercase;
+    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);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    z-index: 1;
+    scroll-snap-type: x mandatory;
+  }
+
+  .bd-light-carousel-track::-webkit-scrollbar {
+    display: none;
+  }
+
+  .bd-light-box {
+    flex: var(--size-0) var(--size-0) auto;
+    width: 450px;
+    background: var(--background-card-grey);
+    border-radius: 28px;
+    border: var(--size-2) solid var(--border-card-grey);
+    padding: 2em;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    text-align: start;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+    min-height: 250px;
+    position: relative;
+    z-index: 2;
+    scroll-snap-align: start;
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-light-box h3 {
+    font-size: var(--size-18);
+    margin: var(--size-0) var(--size-0) 0.5em var(--size-0);
+    font-weight: 600;
+    font-family: var(--font-family-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);
+  }
+
+  .bd-light-icon {
+    position: relative;
+    bottom: 15px;
+    max-width: 100%;
+    height: var(--size-40);
+    width: var(--size-40);
+  }
+
+  @media (max-width: 1024px) {
+    .bd-light-box {
+      width: 380px;
+      padding: 1.5em;
+    }
+    .bd-light-box h3 {
+      font-size: 1.1em;
+    }
+    .bd-light-box p {
+      font-size: 0.95em;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .bd-light-carousel-track {
+      display: flex;
+      flex-direction: column;
+      gap: var(--size-20);
+      overflow-x: hidden;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
+    }
+
+    .bd-light-box {
+      width: 100%;
+      max-width: 400px;
+      margin: var(--size-0) auto;
+    }
+
+    .bd-arrow {
+      display: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .bd-light-box {
+      width: 100%;
+      padding: 1em;
+      min-height: 300px;
+    }
+    .bd-light-box h3 {
+      font-size: 1em;
+    }
+    .bd-light-box p {
+      font-size: 0.9em;
+    }
+    .bd-light-icon {
+      bottom: var(--size-10);
+    }
+  }
+`;

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

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from "lit";
+import carouselCSS from "../light-carousel/light-carousel.css.js";
+
+class CustomLightCarousel extends LitElement {
+  static properties = {
+    title: { type: String },
+  };
+
+  constructor() {
+    super();
+    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 trackWidth = track.offsetWidth;
+    const totalWidth = track.scrollWidth;
+    const scrollPosition = track.scrollLeft;
+
+    const leftArrow = this.shadowRoot.querySelector(".bd-light-left-arrow");
+    const rightArrow = this.shadowRoot.querySelector(".bd-light-right-arrow");
+
+    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>
+    `;
+  }
+}
+class LightCarouselItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    badge: { type: String },
+    icon: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.badge = "";
+    this.icon = "";
+  }
+
+  render() {
+    return html`
+      <div class="bd-light-box">
+       
+        ${this.icon
+          ? html`<img src="${this.icon}" alt="icon" class="bd-light-icon" />`
+          : ""}
+        ${this.title ? html`<h3>${this.title}</h3>` : ""}
+        <slot></slot> 
+      </div>
+    `;
+  }
+}
+CustomLightCarousel.styles = [carouselCSS];
+LightCarouselItem.styles = [carouselCSS];
+
+customElements.define("bd-light-carousel-item", LightCarouselItem);
+
+customElements.define("bd-light-carousel-section", CustomLightCarousel);

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

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import "./light-carousel.js";
+
+export default {
+  title: "Components/Light Carousel",
+  component: "bd-light-carousel-section",
+  tags: ["autodocs"],
+  argTypes: {
+    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="src/assets/icons/light-carousel-img1.png"
+      badge="FAQ"
+    >
+      <p>Bitdefender Internet Security provides the best protection...</p>
+      <p>Bitdefender Internet Security provides the best protection...</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="How to install Bitdefender on another device?"
+      icon="src/assets/icons/light-carousel-img1.png"
+    >
+      <p>You can install Bitdefender on other devices by...</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="How to install Bitdefender on another device?"
+      icon="src/assets/icons/light-carousel-img1.png"
+    >
+      <p>You can install Bitdefender on other devices by...</p>
+    </bd-light-carousel-item>
+  </bd-light-carousel-section>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Need help? We've got answers!",
+};

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

@@ -0,0 +1,16 @@
+import { css } from "../../../node_modules/lit-element/lit-element";
+
+export default css`
+  
+  
+.bd-font-brand{
+    font-family: var(--font-family-sans);
+}
+.bd-font-cod {
+  font-family: var(--font-family-mono);
+}
+
+.bd-font-comp {
+  font-family: 'Arial',sans-serif;
+}
+`;

package/src/components/paragraph/paragraph.js

@@ -0,0 +1,59 @@
+import { LitElement, html, css } from "lit";
+import paragraphText from "../paragraph/paragraph.css.js";
+import textCSS from "../../tokens/typography.css.js";
+
+class TextFontBrand extends LitElement {
+  static properties = {
+    text: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.text = "Componenta Text Font Brand.";
+
+  }
+
+  render() {
+    return html` <p class="bd-font-brand text-display-medium">${this.text}</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> `;
+  }
+}
+TextFontBrand.styles = [paragraphText, textCSS];
+TextFontCod.styles = [paragraphText, textCSS];
+TextFontComp.styles = [paragraphText, textCSS];
+
+customElements.define("bd-font-brand", TextFontBrand);
+customElements.define("bd-font-cod", TextFontCod);
+customElements.define("bd-font-comp", TextFontComp);