@repobit/dex-system-design 0.24.4 → 0.24.5

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

@@ -0,0 +1,116 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import trustPanelCSS from "./trust-panel.css.js";
+
+class TrustPanel extends LitElement {
+  static properties = {
+    eyebrow    : { type: String },
+    title      : { type: String },
+    description: { type: String },
+    linkLabel  : { type: String, attribute: "link-label" },
+    linkHref   : { type: String, attribute: "link-href" },
+    stats      : { type: Array }, // [{ value: String, label: String }]
+    cards      : { type: Array }  // [{ eyebrow, title, description, linkLabel, linkHref }] — logos slotted per card
+  };
+
+  static styles = [tokens, trustPanelCSS];
+
+  constructor() {
+    super();
+    this.eyebrow = "";
+    this.title = "";
+    this.description = "";
+    this.linkLabel = "";
+    this.linkHref = "#";
+    this.stats = [];
+    this.cards = [];
+  }
+
+  _renderCard(card, index) {
+    const logoSlotName = `card-${index + 1}-logos`;
+    return html`
+      <div class="bd-trustpanel-card">
+        ${card.eyebrow
+          ? html`<bd-p kind="regular" font-weight="var(--typography-fontWeight-semibold, 600)" class="bd-trustpanel-card-eyebrow">${card.eyebrow}</bd-p>`
+          : nothing}
+
+        <div class="bd-trustpanel-card-logos">
+          <slot name="${logoSlotName}"></slot>
+        </div>
+
+        ${card.title
+          ? html`<bd-h as="h4" class="bd-trustpanel-card-title">${card.title}</bd-h>`
+          : nothing}
+
+        ${card.description
+          ? html`<bd-p kind="regular" class="bd-trustpanel-card-description">${card.description}</bd-p>`
+          : nothing}
+
+        ${card.linkLabel
+          ? html`
+              <a class="bd-trustpanel-card-link" href=${card.linkHref || "#"}>
+                ${card.linkLabel} <span aria-hidden="true">→</span>
+              </a>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="bd-trustpanel-wrapper">
+        ${this.eyebrow
+          ? html`<bd-p kind="regular" font-weight="var(--typography-fontWeight-semibold, 600)" class="bd-trustpanel-eyebrow"><slot name="eyebrow">${this.eyebrow}</slot></bd-p>`
+          : nothing}
+
+        ${this.title
+          ? html`<bd-h as="h2" class="bd-trustpanel-title"><slot name="title">${this.title}</slot></bd-h>`
+          : nothing}
+
+        ${this.description
+          ? html`
+              <bd-p kind="regular" class="bd-trustpanel-description">
+                <slot name="description">${this.description}</slot>
+                ${this.linkLabel
+                  ? html`
+                      <a class="bd-trustpanel-inline-link" href=${this.linkHref}>
+                        ${this.linkLabel} <span aria-hidden="true">→</span>
+                      </a>
+                    `
+                  : nothing}
+              </bd-p>
+            `
+          : nothing}
+
+        ${this.stats && this.stats.length
+          ? html`
+              <div class="bd-trustpanel-stats">
+                ${this.stats.map(
+                  (stat) => html`
+                    <div class="bd-trustpanel-stat">
+                      <div class="bd-trustpanel-stat-divider"></div>
+                      <div class="bd-trustpanel-stat-value">${stat.value}</div>
+                      <div class="bd-trustpanel-stat-label">${stat.label}</div>
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+
+        ${this.cards && this.cards.length
+          ? html`
+              <div class="bd-trustpanel-cards">
+                ${this.cards.map((card, i) => this._renderCard(card, i))}
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-trust-panel", TrustPanel);

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;
-    }
-  }
-`;