@repobit/dex-system-design 0.4.0 → 0.6.0

package/src/components/FAQ/faq.js

@@ -10,111 +10,8 @@ class FaqSection extends LitElement {
 
   constructor() {
     super();
-    // this.title = "Questions? Answers.";
-
-    // this.faqs = [
-    //   {
-    //     question:
-    //       "How does Bitdefender Internet Security protect me against cyber threats?",
-    //     answer: `
-    //       <p>Bitdefender Internet Security provides the best protection in the industry, as proven by the last 10 years of independent test scores.</p>
-    //       <p>Bitdefender Internet Security has won the Product of The Year award from AV-Comparatives.</p>
-    //       <p>You get a wealth of advanced security and privacy features for Windows - plus many bonus features, including secure VPN, Firewall and Parental Control.</p>
-    //     `,
-    //     open: false,
-    //   },
-    //   {
-    //     question:
-    //       "Does Bitdefender Internet Security protect me against ransomware?",
-    //     answer: `
-    //       <p>Bitdefender Internet Security offers unbeatable ransomware protection that keeps your documents, pictures and videos safe from all known and emerging cyber threats.</p>
-    //       <p>This security solution can identify even the latest ransomware families through the use of multiple layers of protection.</p>
-    //     `,
-    //     open: false,
-    //   },
-    //   {
-    //     question:
-    //       "What type of devices and operating systems does Bitdefender Internet Security cover?",
-    //     answer: `
-    //       <p>Bitdefender Internet Security is a security software designed especially for Windows PCs.</p>
-    //     `,
-    //     open: false,
-    //   },
-    //   {
-    //     question: "Why do I need Bitdefender Internet Security on Windows 10?",
-    //     answer: `
-    //       <p>Windows 10 lets you run the security program of your choosing, and Bitdefender Internet Security is the perfect option if you need the best protection available today.</p>
-    //     `,
-    //     open: false,
-    //   },
-    //   {
-    //     question:
-    //       "How does Bitdefender Internet Security compare to other Bitdefender security products?",
-    //     answer: `
-    //       <p>Bitdefender Internet Security is a security software designed especially for Windows PCs.</p>
-    //       <p>Need security for all operating systems? Bitdefender Total Security offers cross-platform protection that covers Windows PCs, Macs, Smartphones and Tablets running Android or iOS for up to 10 devices.</p>
-    //       <p>Need more devices? Bitdefender Family Pack includes Bitdefender Total Security for up to 15 devices.</p>
-    //       <p>Need unlimited VPN traffic? Bitdefender Premium Security includes Bitdefender Total Security, Bitdefender Premium VPN for Unlimited Traffic & Premium Support.</p>
-    //     `,
-    //     open: false,
-    //   },
-    //   {
-    //     question:
-    //       "Do I get a VPN with my Bitdefender Internet Security subscription?",
-    //     answer: `
-    //       <p>Bitdefender Internet Security comes with a basic version of Bitdefender VPN that includes a generous amount of traffic (200 MB/ day, a total of 6GB/ month), free of charge.</p>
-    //       <p>If you need unlimited traffic, add Bitdefender Premium VPN to your Bitdefender subscription.</p>
-
-    //       `,
-    //     open: false,
-    //   },
-    //   {
-    //     question: "Can I try Bitdefender Internet Security before buying?",
-    //     answer: `
-    //       <p>You can always try before you buy. Download your free 30-day full trial version of Bitdefender Internet Security and test the complete package, no credit card required.</p>
-    //       `,
-    //     open: false,
-    //   },
-    //   {
-    //     question: "How do I activate Bitdefender Internet Security?",
-    //     answer: `
-    //       <p>Just go to your email after your purchase and follow the steps to create a Bitdefender Central Account and activate your subscription. Once your subscription is active in your Bitdefender Account, you can start installing & protecting your devices.</p>
-    //       `,
-    //     open: false,
-    //   },
-    //   {
-    //     question:
-    //       "I changed my computer. How do I reinstall Bitdefender Internet Security?",
-    //     answer: `
-    //       <p>Log in to your Bitdefender Central account, go to My Devices and start installing Bitdefender on your new device. If the old computer is no longer in use, you will not need an additional slot on your subscription.</p>
-    //       `,
-    //     open: false,
-    //   },
-    //   {
-    //     question: "Do I have to renew Bitdefender Internet Security?",
-    //     answer: `
-    //       <p>To help you stay protected, Bitdefender Internet Security can be purchased as a subscription that will automatically renew if you enrolled at the time of purchase.</p>
-    //                <p>You can check and modify the status any time in your Central Account (My Subscriptions -> My Payments) if you activated the subscription on the same email address used for purchase.</p>
-    //       <p>If you purchased Bitdefender Internet Security, you can choose to renew early or purchase for another year (or upgrade) close to the expiration date, depending on the time left on your subscription.</p>
-    //       <p>In any case, starting 30 days before your expiration date, you will receive emails informing you that your subscription is about to expire and describing the next steps.</p>
-
-    //       `,
-    //     open: false,
-    //   },
-    //   {
-    //     question: "I have not received the activation code. What should I do?",
-    //     answer: `
-    //       <p>Confirmation emails are typically received shortly after an order is placed. Make sure you also check your Promotions and Spam folders if your email client categorizes emails automatically. For more information, check this <a class="bd-link-noline" href="https://www.bitdefender.com/consumer/support/answer/94956/?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1738663533" title="Support article.">Support article.</a></p>
-    //    <p>More helpful articles and video tutorials are also available in <a class="bd-link-noline" href="https://www.bitdefender.com/consumer/support/?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1738663533" title="Bitdefender Support Center.">Bitdefender Support Center.</a></p>
-    //       `,
-    //     open: false,
-    //   },
-    // ];
   }
 
-
-
-
   render() {
     return html`
       <div class="bd-faq-container">
@@ -125,8 +22,8 @@ class FaqSection extends LitElement {
       </div>
     `;
   }
-
 }
+
 class FaqSectionItem extends LitElement {
   static properties = {
     title: { type: String },
@@ -137,38 +34,50 @@ class FaqSectionItem extends LitElement {
     super();
     this.title = "";
     this.open = false;
+    this.id = `faq-${Math.random().toString(36).substr(2, 9)}`;
   }
 
-  
-
   toggleItem() {
     this.open = !this.open;
+    this.requestUpdate();
+  }
+
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.toggleItem();
+    }
   }
 
   render() {
     return html`
       <div
         class="bd-faq-item ${this.open ? "open" : ""}"
+        role="button"
+        aria-expanded="${this.open}"
+        aria-controls="${this.id}"
+        tabindex="0"
         @click=${this.toggleItem}
+        @keydown=${this.handleKeyDown}
       >
         <div class="bd-question">
           <span class="bd-icon">${this.open ? "−" : "+"}</span>
           <span class="bd-question-text">${this.title}</span>
         </div>
 
-        ${this.open
-          ? html`
-              <div class="bd-answer">
-                <slot></slot>
-              </div>
-            `
-          : null}
+        <div
+          id="${this.id}"
+          class="bd-answer"
+          role="region"
+          aria-labelledby="${this.id}"
+        >
+          <slot></slot>
+        </div>
       </div>
     `;
   }
 }
 
-
 FaqSection.styles = [faqCSS];
 FaqSectionItem.styles = [faqCSS];
 

package/src/components/FAQ/faq.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import './faq.js'; // Importul componentelor tale. Asigură-te că e corect!
+import './faq.js';
 
 export default {
   title: 'Components/FAQ Section',
@@ -7,34 +7,46 @@ export default {
   tags: ['autodocs'],
   argTypes: {
     title: { control: 'text' },
+
+    item1Title: { control: 'text', name: 'Item 1 Title' },
+    item1Content: { 
+      control: 'text', 
+      name: 'Item 1 Content (separate paragraphs with \\n\\n)', 
+      defaultValue: 'Paragraph 1\n\nParagraph 2\n\nParagraph 3'
+    },
+
+    item2Title: { control: 'text', name: 'Item 2 Title' },
+    item2Content: { 
+      control: 'text', 
+      name: 'Item 2 Content (separate paragraphs with \\n\\n)',
+      defaultValue: 'Paragraph 1\n\nParagraph 2'
+    },
+
+    item3Title: { control: 'text', name: 'Item 3 Title' },
+    item3Content: { 
+      control: 'text', 
+      name: 'Item 3 Content (separate paragraphs with \\n\\n)',
+      defaultValue: 'Paragraph 1\n\nParagraph 2\n\nParagraph 3'
+    },
   },
 };
 
+const renderParagraphs = (text) => {
+  return text.split('\n\n').map(paragraph => html`<p>${paragraph}</p>`);
+};
+
 const Template = (args) => html`
   <bd-faq-section title="${args.title}">
-    <bd-faq-section-item
-      title="How does Bitdefender Internet Security protect me?"
-    >
-      <p>Bitdefender Internet Security provides the best protection...</p>
-      <p>Bitdefender Internet Security provides the best protection...</p>
-      <p>Bitdefender Internet Security provides the best protection...</p>
+    <bd-faq-section-item title="${args.item1Title}">
+      ${renderParagraphs(args.item1Content)}
     </bd-faq-section-item>
 
-    <bd-faq-section-item
-      title="Does Bitdefender protect me against ransomware?"
-    >
-      <p>
-        Yes! Bitdefender Internet Security offers unbeatable ransomware
-        protection...
-      </p>
+    <bd-faq-section-item title="${args.item2Title}">
+      ${renderParagraphs(args.item2Content)}
     </bd-faq-section-item>
 
-    <bd-faq-section-item
-      title="Do I get a VPN with Bitdefender Internet Security?"
-    >
-      <p>
-        Bitdefender Internet Security includes a basic VPN with 200MB per day.
-      </p>
+    <bd-faq-section-item title="${args.item3Title}">
+      ${renderParagraphs(args.item3Content)}
     </bd-faq-section-item>
   </bd-faq-section>
 `;
@@ -42,4 +54,13 @@ const Template = (args) => html`
 export const Default = Template.bind({});
 Default.args = {
   title: 'Questions? Answers.',
+
+  item1Title: 'How does Bitdefender Internet Security protect me?',
+  item1Content: 'Bitdefender Internet Security provides the best protection...\n\nBitdefender Internet Security provides the best protection...\n\nBitdefender Internet Security provides the best protection...',
+
+  item2Title: 'Does Bitdefender protect me against ransomware?',
+  item2Content: 'Yes! Bitdefender Internet Security offers unbeatable ransomware protection...\n\nIt detects ransomware threats in real-time.',
+
+  item3Title: 'Do I get a VPN with Bitdefender Internet Security?',
+  item3Content: 'Bitdefender Internet Security includes a basic VPN with 200MB per day.\n\nYou can upgrade for unlimited VPN usage.\n\nThe VPN protects your online privacy.',
 };

package/src/components/Input/Input.js

@@ -1,5 +1,5 @@
-import { LitElement, html, css } from "lit";
-import inputCSS from '../input/input.css.js'
+import { LitElement, html } from "lit";
+import inputCSS from "../Input/input.css.js";
 
 class CustomInput extends LitElement {
   static properties = {

package/src/components/Input/input.css.js

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from "../lit";
 
 export default css`
   .input-container {

package/src/components/anchor/anchor-nav.css.js

@@ -0,0 +1,92 @@
+import { css } from "lit";
+
+export const anchorNavStyles = css`
+ :host {
+  padding: var(--size-0) 15em;
+  margin: var(--size-0) auto;
+  --bd-accesibility-focus: var(--color-blue-500);
+}
+
+.bd-container {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 2.5em;
+}
+
+a:focus-visible {
+  outline: var(--size-2) solid var(--bd-accesibility-focus);
+  outline-offset: var(--size-2);
+  border-radius: var(--space-2xs);
+}
+
+nav {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
+  padding: var(--size-10) 15em;
+  width: 100%;
+  box-sizing: border-box;
+  background: white;
+}
+
+.bd-container {
+  padding: 50px; /* Adăugăm o umplutură suplimentară pentru a putea vedea mai clar efectul */
+}
+
+
+[id$="-section"] {
+  scroll-margin-top: 120px; /* Ajustează această valoare dacă este necesar */
+}
+
+.anchor-links {
+  position: relative;
+  display: flex;
+  gap: var(--size-32);
+}
+
+a {
+  position: relative;
+  text-decoration: none;
+  color: black;
+  font-weight: 600;
+  padding: var(--size-10) var(--size-0);
+  display: inline-block;
+  font-size: 16px !important;
+  font-family: var(--font-family-sans) !important;
+}
+
+a::after {
+  content: "";
+  position: absolute;
+  left: var(--size-0);
+  bottom: -14px;
+  width: 0%;
+  height: 3px;
+  background-color: #006dff;
+  transition: width 0.3s ease;
+}
+
+a.active::after {
+  width: 100%;
+}
+
+`;
+
+export const anchorNavItemStyles = css`
+  :host {
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+    padding: var(--size-0) 15em;
+    margin: var(--size-0) auto;
+  }
+`;

package/src/components/anchor/anchor-nav.js

@@ -0,0 +1,121 @@
+import { LitElement, html, css } from "lit";
+import { anchorNavStyles, anchorNavItemStyles } from "./anchor-nav.css.js";
+
+// BdAnchorNavItem
+class BdAnchorNavItem extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <nav>
+        <slot></slot>
+      </nav>
+    `;
+  }
+}
+
+
+class BdAnchorNav extends LitElement {
+  static styles = anchorNavStyles;
+
+  constructor() {
+    super();
+    this.activeId = "";
+  }
+
+  firstUpdated() {
+    const firstItem = this.querySelector("bd-anchor-nav-item");
+    if (firstItem) {
+      this.activeId = firstItem.id;
+      this.requestUpdate();
+    }
+  }
+
+  handleClick(event, id) {
+    event.preventDefault();
+    this.activeId = id;
+  
+    const sectionEl = document.querySelector(`#${id}-section`);
+    if (sectionEl) {
+      const offset = 120;
+      const rect = sectionEl.getBoundingClientRect();
+      const scrollTop = window.pageYOffset;
+      const elementY = rect.top + scrollTop;
+      const offsetY = elementY - offset;
+  
+      window.scrollTo({
+        top: offsetY,
+        behavior: "smooth"
+      });
+    }
+  
+    this.requestUpdate();
+  }
+  
+
+ 
+scrollToPricing(event) {
+  event.preventDefault();
+  const pricingSection = document.querySelector("#section-pricing");
+  if (pricingSection) {
+    const offset = 120;
+    const elementY = pricingSection.getBoundingClientRect().top + window.pageYOffset;
+    const offsetY = elementY - offset;
+
+    window.scrollTo({
+      top: offsetY,
+      behavior: "smooth"
+    });
+  }
+}
+
+  render() {
+    const items = Array.from(this.children).filter(
+      (el) => el.tagName === "BD-ANCHOR-NAV-ITEM"
+    );
+
+    return html`
+         <nav>
+          <div class="anchor-links">
+            ${items.map((item, index) => {
+              const id = `anchor-${index + 1}`;
+              return html`
+                <a
+                  href="#${id}"
+                  class="${this.activeId === id ? "active" : ""}"
+                @click=${(e) => this.handleClick(e, id)}
+
+                >
+                  ${item.getAttribute("title")}
+                </a>
+              `;
+            })}
+          </div>
+
+          <div class="bd-cta">
+            <bd-button
+              label="Buy now"
+              kind="danger"
+              size="md"
+              part="buy-button"
+              font-size="18px"
+              font-weight="600"
+              @click=${(e) => this.scrollToPricing(e)}
+            >
+              Buy now
+            </bd-button>
+          </div>
+        </nav>
+     `;
+  }
+}
+
+customElements.define("bd-anchor-nav-item", BdAnchorNavItem);
+customElements.define("bd-anchor-nav", BdAnchorNav);

package/src/components/anchor/anchor.stories.js

@@ -0,0 +1,134 @@
+import { html } from 'lit';
+import '../anchor/anchor-nav.js';
+import '../pricing-cards/pricing-card.js';
+import '../tabs/tabs.js';
+import '../FAQ/faq.js';
+import '../carousel/carousel.js';
+
+export default {
+  title: 'Navigation/Navbar',
+  component: 'bd-anchor-nav',
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**bd-anchor-nav** este o componentă de navigare care oferă linkuri către secțiuni din pagină cu scroll lin.  
+Folosește elemente \`<bd-anchor-nav-item>\` pentru fiecare link, ce trebuie să aibă \`title\` și \`id\`.
+
+---
+
+### Cum se folosește
+
+\`\`\`html
+<bd-anchor-nav>
+  <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Anchor 3" id="anchor-3"></bd-anchor-nav-item>
+</bd-anchor-nav>
+
+<section id="anchor-1-section">Conținut secțiune 1</section>
+<section id="anchor-2-section">Conținut secțiune 2</section>
+<section id="anchor-3-section">Conținut secțiune 3</section>
+\`\`\`
+
+---
+
+### Ce conține demo-ul din acest story
+
+- Navbar cu 3 ancore  
+- Secțiuni cu FAQ, Tabs și Carousel pentru testarea scroll-ului și layout-ului  
+- Secțiune de pricing la final
+
+---
+
+### Alte componente utilizate
+
+- \`bd-faq-section\`, \`bd-faq-section-item\`  
+- \`bd-tabs-component\`  
+- \`bd-carousel-section\`, \`bd-carousel-item\`  
+- \`bd-pricing-container\`
+
+---
+        `,
+      },
+    },
+  },
+};
+
+const Template = (args) => html`
+  <bd-anchor-nav>
+    <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="Anchor 3" id="anchor-3"></bd-anchor-nav-item>
+  </bd-anchor-nav>
+
+  <bd-container>
+    <section id="anchor-1-section" style="height: 800px;">
+      <hr />
+      <bd-faq-section title="Questions? Answers." id="anchor-1-section">
+        <bd-faq-section-item title="How does Bitdefender Internet Security protect me?">
+          <p>Bitdefender Internet Security provides the best protection...</p>
+          <p>Bitdefender Internet Security provides the best protection...</p>
+          <p>Bitdefender Internet Security provides the best protection...</p>
+        </bd-faq-section-item>
+
+        <bd-faq-section-item title="Does Bitdefender protect me against ransomware?">
+          <p>
+            Yes! Bitdefender Internet Security offers unbeatable ransomware
+            protection...
+          </p>
+        </bd-faq-section-item>
+
+        <bd-faq-section-item title="Do I get a VPN with Bitdefender Internet Security?">
+          <p>
+            Bitdefender Internet Security includes a basic VPN with 200MB per day.
+          </p>
+        </bd-faq-section-item>
+      </bd-faq-section>
+    </section>
+
+    <section id="anchor-2-section" style="height: 800px;">
+      <hr />
+      <div class="tabs">
+        <bd-tabs-component id="anchor-2-section"></bd-tabs-component>
+      </div>
+    </section>
+
+    <section id="anchor-3-section" style="height: 800px;">
+      <hr />
+      <bd-carousel-section title="Need help? We've got answers!" id="anchor-3-section">
+        <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"
+        >
+          <h3>Scam Copilot Bot</h3>
+          <p>
+            Specialized AI chatbot that helps you identify suspicious online
+            interactions so you don’t become a victim.
+          </p>
+          <p>
+            Specialized AI chatbot that helps you identify suspicious online
+            interactions so you don’t become a victim.
+          </p>
+          <p>
+            Specialized AI chatbot that helps you identify suspicious online
+            interactions so you don’t become a victim.
+          </p>
+          <h6>Testare Scam Copilot</h6>
+        </bd-carousel-item>
+
+        <!-- alte bd-carousel-item-uri identic cu cele din codul tău -->
+
+      </bd-carousel-section>
+    </section>
+
+    <section id="section-pricing" style="height: 800px;">
+      <bd-pricing-container id="section-pricing"></bd-pricing-container>
+    </section>
+  </bd-container>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/badge/badge.css.js

@@ -0,0 +1,27 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    --badge-background-default: #026DFF;
+    --badge-font-weight: 700;
+    --badge-font-family: var(--font-family-sans, sans-serif);
+  }
+
+  .badge {
+    display: inline-block;
+    background-color: var(--color-blue-500);
+    color: var(--color-neutral-0);
+    border-radius: var(--size-20);
+    font-size: var(--caption-small);
+    font-weight: var(--badge-font-weight);
+    font-family: var(--badge-font-family);
+    line-height: var(--size-20);
+    padding: 0 var(--size-12);
+    white-space: nowrap;
+    user-select: none;
+    vertical-align: middle;
+    box-sizing: border-box;
+    bottom: var(--size-4);
+    position: relative
+  }
+`;

package/src/components/badge/badge.js

@@ -0,0 +1,30 @@
+import { LitElement, html, css } from 'lit';
+import badgeCSS from './badge.css.js';
+
+export class BdBadge extends LitElement {
+  static properties = {
+    text: { type: String },
+    color: { type: String },
+  };
+
+
+
+  constructor() {
+    super();
+    this.text = 'Badge';
+    this.color = '#026DFF';
+  }
+
+  updated(changed) {
+    if (changed.has('color')) {
+      this.style.setProperty('--badge-bg', this.color);
+    }
+  }
+
+  render() {
+    return html`<span class="badge">${this.text}</span>`;
+  }
+}
+BdBadge.styles = [badgeCSS];
+
+customElements.define('bd-badge', BdBadge);