@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/trust-panel/trust-panel.stories.js

@@ -0,0 +1,234 @@
+import { html } from "lit";
+import "./trust-panel.js";
+
+export default {
+  title     : "Components/Trust Panel",
+  component : "bd-trust-panel",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**TrustPanel** is a light-blue section combining an eyebrow/title/description block,
+a row of large stat numbers, and 1-2 white bordered cards (each with logos, a title,
+description, and a "Learn more" link) — used for social-proof / trust-building
+sections.
+
+Shares the same card visual language (white background, border, radius) as
+\`bd-comparison-panel\`, but the content shape (stats row + logo cards) is different
+enough to warrant its own component.
+
+### Usage
+\`\`\`html
+<bd-trust-panel
+  eyebrow="Why trust it"
+  title="Built by Bitdefender"
+  description="AI Guardian is made by Bitdefender, the company that has protected people and organisations since 2001."
+  link-label="Why millions trust Bitdefender"
+  link-href="#"
+  .stats=\${[
+    { value: "50B+", label: "threats blocked every year" },
+    { value: "580+", label: "technology patents" }
+  ]}
+  .cards=\${[
+    { eyebrow: "Brand partnership", title: "Trusted by Ferrari as cybersecurity partner", description: "...", linkLabel: "Learn more", linkHref: "#" }
+  ]}
+>
+  <img slot="card-1-logos" src="/logos/bitdefender.svg" alt="Bitdefender" />
+  <img slot="card-1-logos" src="/logos/ferrari.svg" alt="Ferrari" />
+</bd-trust-panel>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                                        |
+|------------------|--------|---------|------------------------------------------------------------------------|
+| \`eyebrow\`        | String | \`""\`    | Small blue label above the title                                     |
+| \`title\`          | String | \`""\`    | Heading (or the \`title\` slot)                                       |
+| \`description\`    | String | \`""\`    | Paragraph under the title (or the \`description\` slot)               |
+| \`link-label\`     | String | \`""\`    | Optional inline link appended after the description                  |
+| \`link-href\`      | String | \`"#"\`   | URL for the inline description link                                  |
+| \`stats\`          | Array  | \`[]\`    | \`{ value, label }\` — rendered as a row of large numbers with dividers |
+| \`cards\`          | Array  | \`[]\`    | \`{ eyebrow, title, description, linkLabel, linkHref }\` — logos go in slots \`card-N-logos\` |
+
+### Slots
+| Slot                | Description                                              |
+|-----------------------|----------------------------------------------------------|
+| \`eyebrow\`           | Overrides the \`eyebrow\` attribute                        |
+| \`title\`             | Overrides the \`title\` attribute                          |
+| \`description\`       | Overrides the \`description\` attribute                    |
+| \`card-1-logos\`, \`card-2-logos\`, ... | Logo images/elements for each card, in order (1-indexed) |
+        `
+      }
+    }
+  }
+};
+
+const render = (args) => html`
+  <bd-trust-panel
+    eyebrow=${args.eyebrow}
+    title=${args.title}
+    description=${args.description}
+    link-label=${args.linkLabel}
+    link-href=${args.linkHref}
+    .stats=${args.stats}
+    .cards=${args.cards}
+  >
+    <span slot="card-1-logos" style="font-weight:700; color:#006DFF; font-size:18px;">Bitdefender</span>
+    <span slot="card-1-logos" style="font-size:12px; color:#374151; font-weight:600;">FERRARI TEAM PARTNER</span>
+
+    <span slot="card-2-logos" style="font-weight:700; color:#dc2626; font-size:14px;">PC MAG</span>
+    <span slot="card-2-logos" style="font-weight:700; color:#dc2626; font-size:14px;">AV-TEST</span>
+    <span slot="card-2-logos" style="font-weight:700; color:#111827; font-size:14px;">FORRESTER</span>
+  </bd-trust-panel>
+`;
+
+export const Default = {
+  name: "Default — Built by Bitdefender",
+  args: {
+    eyebrow    : "Why trust it",
+    title      : "Built by Bitdefender",
+    description: "AI Guardian is made by Bitdefender, the company that has protected people and organisations since 2001. The figures and recognitions below describe Bitdefender the company — not the AI Guardian product, which is in BETA.",
+    linkLabel  : "Why millions trust Bitdefender",
+    linkHref   : "#",
+    stats      : [
+      { value: "50B+", label: "threats blocked every year" },
+      { value: "580+", label: "technology patents" },
+      { value: "170+", label: "countries protected" },
+      { value: "15+", label: "years of AI-driven security" },
+      { value: "50%+", label: "of employees work in R&D" },
+      { value: "30+", label: "law-enforcement partnerships" }
+    ],
+    cards: [
+      {
+        eyebrow    : "Brand partnership",
+        title      : "Trusted by Ferrari as cybersecurity partner",
+        description: "A partnership born from a passion for high performance and technological innovation — Bitdefender supports Ferrari with Advanced Threat Intelligence to improve detection and response to cyber threats.",
+        linkLabel  : "Learn more",
+        linkHref   : "#"
+      },
+      {
+        eyebrow    : "Brand recognition",
+        title      : "Award-winning security software you can trust. Always.",
+        description: "Consistently top-ranked by the world's leading independent testing labs and tech publications.",
+        linkLabel  : "Learn more",
+        linkHref   : "#"
+      }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design: eyebrow, title, description with inline link, 6-stat row, and 2 white cards with logos, title, description, and a learn-more link."
+      }
+    }
+  }
+};
+
+export const SingleCard = {
+  name  : "Single Card",
+  render: () => html`
+    <bd-trust-panel
+      eyebrow="Why trust it"
+      title="Built by Bitdefender"
+      .stats=${[
+        { value: "50B+", label: "threats blocked every year" },
+        { value: "170+", label: "countries protected" }
+      ]}
+      .cards=${[
+        {
+          eyebrow    : "Brand recognition",
+          title      : "Award-winning security software you can trust. Always.",
+          description: "Consistently top-ranked by the world's leading independent testing labs and tech publications.",
+          linkLabel  : "Learn more",
+          linkHref   : "#"
+        }
+      ]}
+    >
+      <span slot="card-1-logos" style="font-weight:700; color:#dc2626;">AV-TEST</span>
+    </bd-trust-panel>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Only one card in the array — the grid simply renders one card instead of two, no forced empty column."
+      }
+    }
+  }
+};
+
+export const NoCards = {
+  name: "No Cards — Stats Only",
+  args: {
+    eyebrow    : "Why trust it",
+    title      : "Built by Bitdefender",
+    description: "",
+    linkLabel  : "",
+    linkHref   : "#",
+    stats      : [
+      { value: "50B+", label: "threats blocked every year" },
+      { value: "580+", label: "technology patents" },
+      { value: "170+", label: "countries protected" }
+    ],
+    cards: []
+  },
+  render: (args) => html`
+    <bd-trust-panel
+      eyebrow=${args.eyebrow}
+      title=${args.title}
+      .stats=${args.stats}
+      .cards=${args.cards}
+    ></bd-trust-panel>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "cards left empty — only the eyebrow/title and stats row render."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    eyebrow    : "Why trust it",
+    title      : "Built by Bitdefender",
+    description: "AI Guardian is made by Bitdefender, the company that has protected people and organisations since 2001.",
+    linkLabel  : "Why millions trust Bitdefender",
+    linkHref   : "#",
+    stats      : [
+      { value: "50B+", label: "threats blocked every year" },
+      { value: "580+", label: "technology patents" },
+      { value: "170+", label: "countries protected" },
+      { value: "15+", label: "years of AI-driven security" },
+      { value: "50%+", label: "of employees work in R&D" },
+      { value: "30+", label: "law-enforcement partnerships" }
+    ],
+    cards: [
+      {
+        eyebrow    : "Brand partnership",
+        title      : "Trusted by Ferrari as cybersecurity partner",
+        description: "A partnership born from a passion for high performance and technological innovation.",
+        linkLabel  : "Learn more",
+        linkHref   : "#"
+      },
+      {
+        eyebrow    : "Brand recognition",
+        title      : "Award-winning security software you can trust. Always.",
+        description: "Consistently top-ranked by the world's leading independent testing labs.",
+        linkLabel  : "Learn more",
+        linkHref   : "#"
+      }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive — use the Controls panel to edit eyebrow, title, description, stats, and cards live."
+      }
+    }
+  }
+};

package/src/tokens/tokens.css

@@ -101,7 +101,7 @@
   --color-yellow-800: #855f00;
   --color-yellow-900: #5c4000;
   --color-yellow-950: #473100;
-
+ 
   --color-neutral-0: #ffffff;
   --color-neutral-25: #fafafa;
   --color-neutral-50: #f1f2f3;

package/src/components/tabsComponent/tabsComponent.css.js

@@ -1,267 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-700);
-    --bd-accesibility-focus: var(--color-blue-500);
-
-    --text-color-white: var(--color-neutral-0);
-    font-size: 100%;
-    display: block;
-    font-family: var(--typography-fontFamily-sans);
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
-  }
-.bd-tabs-subtitle{
-font-size: var(--typography-body-regular-fontSize);
-max-width: 500px;
-text-align: center;
-    font-family: var(--typography-fontFamily-sans);
-    margin-top: var(--spacing-32);
-    margin-bottom: var(--spacing-32);
-
-}
-  .bd-tab-button p {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-  .bd-tab-button:focus-visible,
-  .bd-find-out-more:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
-  }
-  .bd-tabs-component .bd-left img {
-    max-width: 90%;
-  }
-
-  .bd-card-container {
-    display: flex;
-    justify-content: space-between;
-    padding: 36px 0px;
-    border-radius: 5px;
-    margin-top: 10px;
-    margin: auto;
-    width: 50%;
-  }
-
-  .bd-card-container .bd-left {
-    flex: 1;
-    padding-right: 20px;
-  }
-
-  .bd-card-container .bd-right {
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    padding: var(--spacing-0) var(--spacing-24);
-  }
-
-  .bd-tabs-container {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 40px;
-    flex-wrap: wrap;
-    border-bottom: 1px solid #e4f2ff;
-    margin: 0 auto;
-    margin-bottom: var(--spacing-32);
-  }
-
-  .bd-tabs-container button {
-    color: #006eff;
-    border: 0;
-    padding: 9px;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    font-size: 1.125em;
-    max-height: 55px;
-  }
-
-  .bd-tabs-container button::after {
-    background: #006eff;
-    content: "";
-    height: 4px;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 0;
-    transition: width 1s ease;
-  }
-
-  .bd-tabs-container button.bd-selected::after {
-    width: 100%;
-  }
-
-  .bd-tabs-container button.bd-selected {
-    color: black;
-  }
-
-  .bd-tab-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    background: none;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-   <!-- font-weight: bold; -->
-  }
-
-  .bd-tab-button img {
-    margin-right: 8px;
-    height: 30px;
-    width: 30px;
-  }
-
-  .bd-tabs-component h2 {
-    margin-bottom: 75px;
-    max-width: 630px;
-    text-align: center;
-  }
-
-  .bd-tabs-component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .bd-ul-privacy {
-    list-style: none;
-    padding-inline-start: 0px;
-  }
-
-  .bd-find-out-more {
-    text-decoration: none;
-    background-color: white;
-    color: #006eff;
-    border: 0;
-    display: flex;
-    gap: 10px;
-    align-items: start;
-    position: relative;
-    cursor: pointer;
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-  }
-
-  .bd-find-out-more .bd-arrow svg {
-    width: 12px;
-    height: 12px;
-    position: relative;
-    top: 1.5px;
-  }
-
-  .bd-right h3 {
-    font-size: var(--typography-heading-h4-fontSize);
-  }
-
-  .bd-section-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-  }
-
-  /* ✅ Responsive Design */
-  @media (max-width: 1200px) {
-    .bd-tabs-component.bd-we-container {
-      max-width: 100%;
-      padding: 0 20px;
-    }
-  }
-
-  @media (max-width: 992px) {
-    .bd-tabs-component .bd-card-container {
-      flex-direction: column;
-      width: 90%;
-    }
-
-    .bd-tabs-component .bd-tabs-container {
-      flex-wrap: wrap;
-    }
-
-    .bd-tabs-component .bd-tabs-container button picture img {
-      width: 24px;
-    }
-
-    .bd-tabs-component .bd-card-container {
-      align-items: center;
-      text-align: center;
-    }
-
-    .bd-tabs-component .bd-left {
-      width: 100%;
-      padding: 10px;
-    }
-
-    .bd-tabs-component .bd-left img {
-      max-width: 50%;
-    }
-
-    .bd-tabs-component .bd-right {
-      width: 100%;
-      padding: 10px;
-    }
-
-    .bd-tabs-component.bd-we-container {
-      max-width: 100%;
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .bd-card-container {
-      flex-direction: column;
-      width: 100%;
-      padding: 20px;
-    }
-
-    .bd-section-title {
-      text-align: center;
-      font-size: 1.6em;
-      margin-bottom: 30px;
-      padding: 10px;
-    }
-
-    .bd-right h3 {
-      text-align: center;
-    }
-
-    .bd-tabs-component {
-      margin-top: 24px;
-    }
-
-    .bd-tabs-container {
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      width: 100%;
-    }
-
-    .bd-tabs-container button {
-      font-size: 1.2em;
-      padding: 6px;
-    }
-
-    .bd-tabs-component .bd-left img {
-      max-width: 100%;
-      height: auto;
-    }
-
-    .bd-tabs-component .bd-right {
-      text-align: center;
-      padding: 10px;
-      text-align: left;
-    }
-
-    .bd-find-out-more {
-      justify-content: center;
-    }
-  }
-`;

package/src/components/tabsComponent/tabsComponent.js

@@ -1,193 +0,0 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
-import "../heading/heading.js";
-import "../highlight/highlight.js";
-import "../list/list-item/list-item.js";
-import "../list/list.js";
-import "../paragraph/paragraph.js";
-import tabsCSS from "./tabsComponent.css.js";
-
-class TabsComponent extends LitElement {
-  static properties = {
-    selectedTab: { type: Number }
-  };
-
-  constructor() {
-    super();
-    this.selectedTab = 0;
-  }
-
-  selectTab(index) {
-    this.selectedTab = index;
-    this.requestUpdate();
-  }
-
-  render() {
-    const tabs = [
-      {
-        title    : "Privacy Protection",
-        imageBase: "/assets/tabs-img1.png",
-        icon     : "/assets/pic1.png"
-      },
-      {
-        title    : "Identity Protection",
-        imageBase: "/assets/tabs-img2.png",
-        icon     : "/assets/pic2.png"
-      },
-      {
-        title    : "Device Protection",
-        imageBase: "/assets/tabs-img3.png",
-        icon     : "/assets/pic3.png"
-      },
-      {
-        title    : "Financial Insurance",
-        imageBase: "/assets/tabs-img3.png",
-        icon     : "/assets/pic3.png"
-      }
-    ];
-
-    const content = [
-      {
-        heading    : "Take back your family's digital privacy",
-        description: () => html`
-          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-            <bd-li kind="bullet" size="md">
-              <bd-p kind="small">Enjoy complete data privacy with
-              <strong>Bitdefender Premium VPN</strong>.</bd-p>
-            </bd-li>
-            <bd-li kind="bullet" size="md">
-              <bd-p kind="small">Escape intrusive ads and trackers with our advanced
-              <strong>Ad-Blocker</strong> and
-              <strong>Anti-Tracker</strong> features.</bd-p>
-            </bd-li>
-            <bd-li kind="bullet" size="md">
-              <bd-p kind="small">Shield yourself with robust
-              <strong>Webcam and Microphone Protection</strong>.</bd-p>
-            </bd-li>
-          </bd-list>`,
-        href: "#1"
-      },
-      {
-        heading    : "Safe data. Safe you.",
-        description: () => html`
-          <bd-p kind="small">Get instant alerts for potential threats to your personal data and
-            finances.</bd-p>
-          <bd-p kind="small">Receive clear and concise advice on handling data breaches.</bd-p>
-          <bd-p kind="small">Reduce the risk of online ID theft by scanning your digital
-            footprint.</bd-p>`,
-        href: "#2"
-      },
-      {
-        heading    : "We secure what you hold dear",
-        description: () => html`
-          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
-          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
-            attempts.</bd-p>
-          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
-        href: "#3"
-      },
-      {
-        heading    : "Financial Insurance",
-        description: () => html`
-          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
-          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
-            attempts.</bd-p>
-          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
-        href: "#4"
-      }
-    ];
-
-    const selectedTabData = tabs[this.selectedTab];
-
-    return html`
-      <div class="bd-tabs-component">
-        <bd-highlight highlight-text="family member">
-          Customized online protection for each family member - Smart, Private &
-          Safe
-        </bd-highlight>
-        <bd-p kind="regular" class="bd-tabs-subtitle">Your family is unique and so should be your online security. Our family protection plan adapts to each member's needs, offering the ideal mix of privacy, freedom, and safety.</bd-p>
-        <div class="bd-tabs-container">
-          ${tabs.map(
-            (tab, index) => html`
-              <button
-                role="tab"
-                aria-selected="${this.selectedTab === index ? "true" : "false"}"
-                class=${this.selectedTab === index
-                  ? "bd-selected bd-tab-button"
-                  : "bd-tab-button"}
-                @click=${() => this.selectTab(index)}
-                aria-controls="tab-content-${index}"
-                id="tab-${index}"
-              >
-                <img src="${tab.icon}" alt="${tab.title} Icon" />
-                <bd-p kind="small"><strong>${tab.title}</strong></bd-p>
-              </button>
-            `
-          )}
-        </div>
-        <div class="bd-card-container">
-          <div class="bd-left">
-            <picture>
-              ${["webp", "png"].map((format) =>
-                ["2000", "750"].map(
-                  (width) => html`
-                    <source
-                      type="image/${format}"
-                      srcset="
-                        ${selectedTabData.imageBase}?width=${width}&format=${format}&optimize=medium
-                      "
-                      media="${width === "2000" ? "(min-width: 600px)" : ""}"
-                    />
-                  `
-                )
-              )}
-              <img
-                loading="lazy"
-                alt="${selectedTabData.title} Image"
-                src="${selectedTabData.imageBase}?width=750&format=png&optimize=medium"
-              />
-            </picture>
-          </div>
-          <div class="bd-right">
-            <bd-h as="h3" id="tab-content-heading-${this.selectedTab}">
-              ${content[this.selectedTab].heading}
-            </bd-h>
-            <div
-              id="tab-content-${this.selectedTab}"
-              aria-labelledby="tab-content-heading-${this.selectedTab}"
-            >
-              ${content[this.selectedTab].description()}
-            </div>
-            <a
-              href="${content[this.selectedTab].href}"
-              class="bd-find-out-more"
-              aria-label="Find out more about ${content[this.selectedTab]
-                .heading}"
-            >
-              <bd-p kind="small">Find out more</bd-p>
-              <span class="bd-arrow">
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M5 12h14"></path>
-                  <path d="M12 5l7 7-7 7"></path>
-                </svg>
-              </span>
-            </a>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-TabsComponent.styles = [tokens, tabsCSS];
-
-customElements.define("bd-tabs-component", TabsComponent);