@repobit/dex-system-design 0.5.0 → 0.6.0

package/src/components/highlight/highlight.css.js

@@ -0,0 +1,119 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1.3;
+    text-align: center;
+    color: #000;
+  }
+
+  .headline {
+    margin: 0;
+  }
+
+  .highlight {
+    display: inline;
+    background: #F1F7FE;
+    color: #000;
+    z-index: -1;
+    position: relative;
+margin-left: calc(var(--size-4) * -1);
+    margin-right: var(--size-2);
+  }
+
+.highlight-text {
+  position: relative; 
+  z-index: 1;        
+  padding-left: var(--size-4);
+  padding-right: 0px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+  .highlight-right-anchor {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    vertical-align: bottom;
+    position: relative;
+      margin-left: -12px;
+
+  }
+
+  .highlight-deco {
+    position: absolute;
+    width: var(--size-8);
+    height: 46px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .highlight-deco.left {
+    left: -3px;
+    top: -4px;
+  }
+
+  .highlight-deco.right {
+    bottom: 0;
+    left: 3px;
+    top: -10px;
+  }
+
+  .highlight-svg-rect {
+    width: var(--size-2);
+    height: 38px;
+    fill: #006DFF;
+    margin: 0;
+    display: block;
+  }
+
+  .highlight-svg-ellipse-top,
+  .highlight-svg-ellipse-bottom {
+    width: var(--size-8);
+    height: var(--size-8);
+    fill: #006DFF;
+    display: block;
+  }
+
+  @media (max-width: 600px) {
+  :host {
+    font-size: 20px;
+  }
+
+  .highlight {
+    margin-right: var(--size-2);
+  }
+
+  .highlight-deco {
+    height: var(--size-32);
+    width: var(--size-6);
+  }
+
+  .highlight-svg-rect {
+   var(--size-24);
+  }
+
+  .highlight-svg-ellipse-top,
+  .highlight-svg-ellipse-bottom {
+    width: var(--size-6);
+    height: var(--size-6);
+  }
+      .highlight-deco.right {
+    bottom: 0;
+    left: 3px;
+    top: -6px;
+  }
+    .highlight-text{
+    padding-right: 3px;
+    }
+}
+
+`;

package/src/components/highlight/highlight.js

@@ -0,0 +1,60 @@
+import { LitElement, html } from "lit";
+import highlightCSS from "./highlight.css.js";
+
+class BdHighlightSection extends LitElement {
+  static properties = {
+    highlightText: { type: String, attribute: 'highlight-text' }
+  };
+
+  static styles = [highlightCSS];
+
+  render() {
+    const fullText = this.textContent || "";
+    const highlightText = this.highlightText || "";
+
+    if (!highlightText || !fullText.includes(highlightText)) {
+      return html`<p class="headline"><slot></slot></p>`;
+    }
+
+    const [before, after] = fullText.split(highlightText);
+
+    return html`
+      <p class="headline">
+        ${before}
+        <span class="highlight">
+          <span class="highlight-text">${highlightText}</span>
+          <span class="highlight-right-anchor"></span>
+          <span class="highlight-deco left">
+            <svg class="highlight-svg-ellipse-top" viewBox="0 0 8 8">
+              <ellipse cx="4" cy="4" rx="4" ry="4" />
+            </svg>
+            <svg class="highlight-svg-rect" viewBox="0 0 2 42">
+              <rect x="0" y="0" width="2" height="42" />
+            </svg>
+          </span>
+          <!-- deco-right moved to its own anchor -->
+        </span>
+        ${after}
+      </p>
+    `;
+  }
+
+  updated() {
+    const anchor = this.renderRoot.querySelector(".highlight-right-anchor");
+    if (!anchor) return;
+
+    const deco = document.createElement("span");
+    deco.classList.add("highlight-deco", "right");
+    deco.innerHTML = `
+      <svg class="highlight-svg-rect" viewBox="0 0 2 42">
+        <rect x="0" y="0" width="2" height="42" />
+      </svg>
+      <svg class="highlight-svg-ellipse-bottom" viewBox="0 0 8 8">
+        <ellipse cx="4" cy="4" rx="4" ry="4" />
+      </svg>
+    `;
+    anchor.appendChild(deco);
+  }
+}
+
+customElements.define("bd-highlight-section", BdHighlightSection);

package/src/components/highlight/highlight.stories.js

@@ -0,0 +1,53 @@
+import "./highlight.js";
+import { html } from "lit";
+
+export default {
+  title: "Atoms/Highlight Section",
+  component: "bd-highlight-section",
+  tags: ["autodocs"],
+  argTypes: {
+    highlightText: { control: "text" },
+    defaultSlot: { control: "text", name: "Text Content" },
+  },
+};
+
+const Template = ({ highlightText, defaultSlot }) => html`
+  <bd-highlight-section highlight-text="${highlightText}">
+    ${defaultSlot}
+  </bd-highlight-section>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  highlightText: "next generation of digital security",
+  defaultSlot:
+    "Introducing the next generation of digital security: your personalized shield for a worry-free online experience.",
+};
+
+export const LongText = Template.bind({});
+LongText.args = {
+  highlightText: "next generation of digital security test test testtest123",
+  defaultSlot:
+    "Introducing the next generation of digital security test test testtest123: your personalized shield for a worry-free online experience.",
+};
+
+export const ShortText = Template.bind({});
+ShortText.args = {
+  highlightText: "Introducing",
+  defaultSlot:
+    "Introducing the next generation of digital security: your personalized shield for a worry-free online experience.",
+};
+
+export const MissingHighlight = Template.bind({});
+MissingHighlight.args = {
+  highlightText: "something not in the text",
+  defaultSlot:
+    "Introducing the next generation of digital security: your personalized shield for a worry-free online experience.",
+};
+
+export const MultipleOccurrences = Template.bind({});
+MultipleOccurrences.args = {
+  highlightText: "security",
+  defaultSlot:
+    "This security system improves your security and brings peace of mind to your digital experience.",
+};

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

@@ -9,12 +9,11 @@ export default css`
   .bd-section-title {
     font-family: var(--font-family-sans);
     font-weight: var(--font-weight-sans-semibold);
-     font-size: 2em;
+    font-size: 2em;
   }
   .bd-header-light-carousel {
     margin-bottom: 50px;
     margin-top: 50px;
-    
   }
   .bd-light-carousel {
     display: flex;
@@ -60,15 +59,14 @@ export default css`
     background: var(--background-card-grey);
     border-radius: 28px;
     border: var(--size-2) solid var(--border-card-grey);
-    padding: 2em;
+    padding: var(--size-32);
     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;
+    min-height: 155px;
     position: relative;
     z-index: 2;
     scroll-snap-align: start;
@@ -76,8 +74,8 @@ export default css`
   }
 
   .bd-light-box h3 {
-    font-size: var(--size-18);
-    margin: var(--size-0) var(--size-0) 0.5em var(--size-0);
+    font-size: var(--heading-xsmall);
+    margin: var(--size-0) var(--size-8) var(--size-8) var(--size-0);
     font-weight: 600;
     font-family: var(--font-family-sans);
   }
@@ -90,11 +88,21 @@ export default css`
 
   .bd-light-icon {
     position: relative;
-    bottom: 15px;
+    bottom: var(--size-6);
     max-width: 100%;
-    height: var(--size-40);
-    width: var(--size-40);
+    height: var(--size-32);
+    width: var(--size-32);
   }
+  .bd-light-box-header {
+    display: flex;
+    align-items: center;
+    gap: var(--size-8);
+  }
+    .bd-light-title-badge-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--size-4, 4px);
+}
 
   @media (max-width: 1024px) {
     .bd-light-box {

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

@@ -37,13 +37,15 @@ class CustomLightCarousel extends LitElement {
 
   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;
 
-    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 {
@@ -60,15 +62,13 @@ class CustomLightCarousel extends LitElement {
   render() {
     return html`
       <section class="bd-light-carousel">
-       <div class="bd-header-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> 
+          <slot></slot>
         </div>
-
-     
       </section>
     `;
   }
@@ -87,18 +87,31 @@ class LightCarouselItem extends LitElement {
     this.icon = "";
   }
 
-  render() {
-    return html`
-      <div class="bd-light-box">
-       
+render() {
+  return html`
+    <div class="bd-light-box">
+      <div class="bd-light-box-header">
         ${this.icon
           ? html`<img src="${this.icon}" alt="icon" class="bd-light-icon" />`
           : ""}
-        ${this.title ? html`<h3>${this.title}</h3>` : ""}
-        <slot></slot> 
+
+        ${this.title || this.badge
+          ? html`
+              <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>`
+                  : ""}
+              </div>
+            `
+          : ""}
       </div>
-    `;
-  }
+      <slot></slot>
+    </div>
+  `;
+}
+
+
 }
 CustomLightCarousel.styles = [carouselCSS];
 LightCarouselItem.styles = [carouselCSS];

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

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "./light-carousel.js";
+import "../badge/badge.js"; // asigură-te că bd-badge este importat
 
 export default {
   title: "Components/Light Carousel",
@@ -14,25 +15,26 @@ 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"
+      icon="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>
+      <p>Advanced AI and behavior-based detection ensure safety online and offline.</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"
+      icon="icons/light-carousel-img1.png"
     >
-      <p>You can install Bitdefender on other devices by...</p>
+      <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="How to install Bitdefender on another device?"
-      icon="src/assets/icons/light-carousel-img1.png"
+      title="Can I transfer my license to a new computer?"
+      icon="icons/light-carousel-img1.png"
+      badge="How To"
     >
-      <p>You can install Bitdefender on other devices by...</p>
+      <p>Yes, just remove the license from the old device via Central and activate it on the new one.</p>
     </bd-light-carousel-item>
   </bd-light-carousel-section>
 `;

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

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

package/src/components/pricing-cards/pricing-card.css.js

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from "../lit";
 
 export default css`
   :host {
@@ -7,11 +7,27 @@ export default css`
     --border-card-green: var(--color-green-700);
     --badge-background: var(--color-blue-500);
     --text-color-white: var(--color-neutral-0);
+    --bd-accesibility-focus: var(--color-blue-500);
   }
   body {
     font-family: "IBM Plex Mono", monospace;
   }
+
+  button {
+    outline: none;
+  }
+
+  button:focus-visible {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
+  }
+  a:focus-visible {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
+    border-radius: var(--space-2xs);
+  }
   .card {
+    padding-top: 2em;
     background: var(--background-card-grey);
     border: var(--size-2) solid var(--border-card-grey);
     border-radius: var(--size-20);
@@ -21,6 +37,10 @@ export default css`
     position: relative;
     height: 100%;
   }
+  .bd-section-title {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+  }
 
   .highlight {
     border: var(--size-2) solid var(--border-card-green);
@@ -34,15 +54,18 @@ export default css`
     border-top-left-radius: var(--size-20);
     border-top-right-radius: var(--size-20);
     position: absolute;
-    top: -47px;
+    top: -2.67em; /* echivalent cu -3rem */
     left: 50%;
     transform: translateX(-50%);
     width: 85%;
     font-family: var(--font-family-sans);
     font-weight: 600;
     line-height: 14px;
+    z-index: 1;
+  }
+  .pricing-cards .card:nth-child(2) .highlight-banner {
+    top: -30px;
   }
-
   .card-header {
     text-align: start;
   }
@@ -157,6 +180,7 @@ export default css`
     gap: var(--size-12);
     align-items: stretch;
     margin-bottom: var(--size-20);
+    width: 100%;
   }
 
   .features h4 {
@@ -406,4 +430,115 @@ export default css`
     position: relative;
     bottom: var(--size-4);
   }
+
+  @media (max-width: 1024px) {
+    .pricing-cards {
+      flex-direction: column;
+      align-items: center;
+      gap: var(--size-52);
+    }
+
+    .pricing-card {
+      max-width: 80%;
+    }
+
+    .card-title {
+      font-size: 1.5em;
+      line-height: 28px;
+    }
+
+    .price {
+      font-size: 32px;
+    }
+
+    .highlight-banner {
+      font-size: 16px;
+      width: 90%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .pricing-card {
+      max-width: 90%;
+      padding: var(--size-24);
+    }
+    .switchBox {
+      text-align: center;
+      padding-bottom: 30px;
+    }
+    .bd-section-title {
+      text-align: center;
+      font-size: 2em;
+    }
+
+    .card-title {
+      font-size: 1.3em;
+    }
+
+    .price {
+      font-size: 28px;
+    }
+
+    .badge-subtitle,
+    .original-price,
+    .discount,
+    .terms {
+      font-size: 14px;
+    }
+
+    .pricing-info {
+      flex-direction: column;
+      gap: var(--size-4);
+    }
+
+    .highlight-banner {
+      font-size: 14px;
+      padding: var(--size-8);
+    }
+
+    .actions {
+      flex-direction: column;
+      gap: var(--size-8);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .pricing-card {
+      max-width: 100%;
+      padding: var(--size-16);
+    }
+
+    .card-title {
+      font-size: 1.1em;
+    }
+
+    .price {
+      font-size: 24px;
+    }
+
+    .badge-subtitle,
+    .original-price,
+    .discount,
+    .terms {
+      font-size: 12px;
+    }
+
+    .highlight-banner {
+      font-size: 12px;
+    }
+
+    .badge {
+      font-size: 12px;
+      padding: var(--size-4) var(--size-6);
+    }
+
+    .actions {
+      gap: var(--size-6);
+    }
+  }
+  @media (min-width: 768px) and (max-width: 1024px) {
+    pricing-card {
+      margin-bottom: 100px;
+    }
+  }
 `;