@repobit/dex-system-design 0.24.4 → 0.24.5

package/src/components/overview/overview.js

@@ -0,0 +1,63 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import infoPanelCSS from "./overview.css.js";
+
+class Overview extends LitElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String },
+    facts      : { type: Array } // [{ label: String, value: String }]
+  };
+
+  static styles = [tokens, infoPanelCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+    this.facts = [];
+  }
+
+  render() {
+    return html`
+      <div class="bd-infopanel-container">
+        ${this.title
+          ? html`
+              <bd-h as="h2" class="bd-infopanel-title">
+                <slot name="title">${this.title}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        <div class="bd-infopanel-left">
+          ${this.description
+            ? html`
+                <bd-p kind="large" class="bd-infopanel-description">
+                  <slot name="description">${this.description}</slot>
+                </bd-p>
+              `
+            : nothing}
+
+          <slot></slot>
+        </div>
+
+        <div class="bd-infopanel-right">
+          ${this.facts.map(
+            (fact) => html`
+              <div class="bd-infopanel-row">
+                <div class="bd-infopanel-divider"></div>
+                <bd-p kind="xsmall" class="bd-infopanel-label">${fact.label}</bd-p>
+                <bd-p kind="normal" class="bd-infopanel-value">${fact.value}</bd-p>
+              </div>
+            `
+          )}
+          <slot name="facts"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-overview", Overview);

package/src/components/overview/overview.stories.js

@@ -0,0 +1,193 @@
+import { html } from "lit";
+import "./overview.js";
+
+export default {
+  title     : "Components/Overview",
+  component : "bd-info-panel",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**InfoPanel** pairs a large title + description on the left with a stacked list of
+labeled facts on the right, each row separated by a thin top border line — a
+"spec sheet" style layout, e.g. for a product's key facts.
+
+### Usage
+\`\`\`html
+<bd-info-panel
+  title="What is AI Guardian?"
+  description="AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents — prompt injection, unsafe tool use, data leakage, and unauthorised actions. It adds a baseline security model of policies, permissions, and auditing, guardrails for tool execution, and monitoring and response workflows."
+  .facts=\${[
+    { label: "CATEGORY", value: "AI agent security" },
+    { label: "PLATFORM", value: "macOS (initial)" },
+    { label: "RUNS AS", value: "Background service" },
+    { label: "VERDICTS", value: "Allowed / Flagged / Blocked" }
+  ]}
+></bd-info-panel>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                             |
+|------------------|--------|---------|-------------------------------------------------------------|
+| \`title\`          | String | \`""\`    | Large heading on the left (or use the \`title\` slot)         |
+| \`description\`    | String | \`""\`    | Supporting paragraph under the title (or the \`description\` slot) |
+| \`facts\`          | Array  | \`[]\`    | Right-column rows: \`{ label, value }\`                       |
+
+### Slots
+| Slot           | Description                                              |
+|-----------------|--------------------------------------------------------------|
+| \`title\`         | Overrides the \`title\` attribute if content is provided       |
+| \`description\`   | Overrides the \`description\` attribute if content is provided |
+| \`facts\`         | Extra freeform fact rows appended after the ones from \`facts\` |
+| (default)       | Extra freeform content appended after the description on the left |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title      : { control: "text", table: { category: "Content" } },
+    description: { control: "text", table: { category: "Content" } },
+    facts      : { control: "object", table: { category: "Content" } }
+  }
+};
+
+const render = (args) => html`
+  <bd-info-panel
+    title=${args.title}
+    description=${args.description}
+    .facts=${args.facts}
+  ></bd-info-panel>
+`;
+
+export const Default = {
+  name: "Default — AI Guardian",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents — prompt injection, unsafe tool use, data leakage, and unauthorised actions. It adds a baseline security model of policies, permissions, and auditing, guardrails for tool execution, and monitoring and response workflows.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" },
+      { label: "RUNS AS", value: "Background service" },
+      { label: "VERDICTS", value: "Allowed / Flagged / Blocked" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design exactly: title + description on the left, 4 labeled fact rows on the right, each preceded by a thin blue divider line."
+      }
+    }
+  }
+};
+
+export const TwoFacts = {
+  name: "Two Facts",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "A shorter description paired with just two fact rows on the right.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Only 2 facts — the right column is simply shorter, no extra spacing added to compensate."
+      }
+    }
+  }
+};
+
+export const ManyFacts = {
+  name: "Many Facts",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "A longer fact list demonstrates the row/divider pattern repeating cleanly.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" },
+      { label: "RUNS AS", value: "Background service" },
+      { label: "VERDICTS", value: "Allowed / Flagged / Blocked" },
+      { label: "PRICING", value: "Free during open BETA" },
+      { label: "LANGUAGE", value: "Swift" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "6 fact rows — the pattern of divider + label + value repeats consistently regardless of count."
+      }
+    }
+  }
+};
+
+export const NoDescription = {
+  name: "No Description",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`description` omitted — no paragraph rendered under the title, no leftover gap."
+      }
+    }
+  }
+};
+
+export const SlottedContent = {
+  name  : "Slotted Title, Description, and Extra Facts",
+  render: () => html`
+    <bd-info-panel>
+      <span slot="title">Custom <em>slotted</em> title</span>
+      <span slot="description">Custom slotted description with <strong>inline markup</strong>.</span>
+
+      <div slot="facts" class="bd-infopanel-row" style="display:flex; flex-direction:column; gap:4px; padding-top:16px;">
+        <div style="border-top: 1px solid #3b82f6; margin-bottom:16px;"></div>
+        <span style="text-transform:uppercase; letter-spacing:0.06em; font-size:12px; color:#60a5fa;">EXTRA</span>
+        <strong>A manually slotted fact row</strong>
+      </div>
+    </bd-info-panel>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates overriding `title`/`description` via slots (for inline markup) and appending an extra fact row via the `facts` slot alongside the ones generated from the `facts` array."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" },
+      { label: "RUNS AS", value: "Background service" },
+      { label: "VERDICTS", value: "Allowed / Flagged / Blocked" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit title, description, and the facts array live."
+      }
+    }
+  }
+};

package/src/components/page-switcher/page-switcher.css.js

@@ -0,0 +1,100 @@
+import { css } from "lit";
+
+export const pageSwitcherStyles = css`
+  :host {
+    display: block;
+    position: sticky;
+    top: 0;
+    z-index: 200;
+    background: var(--color-neutral-0);
+    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
+    --bd-accesibility-focus: var(--color-blue-500);
+  }
+
+  .inner {
+    max-width: 1200px;
+    margin-inline: auto;
+    padding-block: var(--spacing-16);
+    padding-inline: var(--spacing-24);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-32);
+  }
+
+  .logo {
+    font-size: var(--typography-fontSize-lg);
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  .logo span {
+    color: var(--color-blue-500);
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-16) var(--spacing-32);
+  }
+
+  .page-link {
+    position: relative;
+    text-decoration: none !important;
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-normal);
+    padding: var(--spacing-10) var(--spacing-0);
+    display: inline-block;
+    font-size: var(--typography-body-regular-fontSize);
+    font-family: var(--typography-body-regular-fontFamily);
+    transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .page-link.active {
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  .page-link:hover,
+  .page-link.bd-link--primary:hover {
+    color: var(--color-blue-500) !important;
+    text-decoration: none !important;
+  }
+
+  .page-link.bd-link--secondary:hover {
+    color: var(--color-neutral-900) !important;
+    text-decoration: none !important;
+  }
+
+  .page-link.active:hover {
+    color: var(--color-neutral-900) !important;
+  }
+
+  .page-link::after {
+    content: "";
+    position: absolute;
+    left: var(--spacing-0);
+    bottom: calc(-1 * var(--spacing-14));
+    width: 0%;
+    height: var(--border-width-3);
+    background-color: var(--color-blue-500);
+    transition: width var(--transition-duration-slow) var(--transition-easing-ease-out);
+  }
+
+  .page-link.active::after {
+    width: 100%;
+  }
+
+  .page-link:focus-visible {
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
+    border-radius: var(--space-2xs);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .page-link::after {
+      transition: none !important;
+    }
+  }
+`;

package/src/components/page-switcher/page-switcher.js

@@ -0,0 +1,42 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../icons/bd-ai-icon.js";
+import "../link/link.js";
+import { pageSwitcherStyles } from "./page-switcher.css.js";
+
+class BdPageSwitcher extends LitElement {
+  static properties = {
+    items: { type: Array } // [{ title, href, active }]
+  };
+
+  static styles = [tokens, pageSwitcherStyles];
+
+  constructor() {
+    super();
+    this.items = [];
+  }
+
+  render() {
+    return html`
+      <div class="inner">
+        <bd-ai-icon class="logo" width="126" height="24"></bd-ai-icon>
+
+        <nav aria-label="Product navigation">
+          ${this.items.map(({ title, href, active }) => html`
+            <bd-link
+              href=${href}
+              kind=${active ? "primary" : "secondary"}
+              no-underline
+              color="var(--color-neutral-900)"
+              ?active=${active}
+              aria-current=${active ? "true" : nothing}
+              class="page-link ${active ? "active" : ""}"
+            >${title || nothing}</bd-link>
+          `)}
+        </nav>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-page-switcher", BdPageSwitcher);

package/src/components/paragraph/paragraph.js

@@ -7,8 +7,9 @@ export class BdP extends LitElement {
     kind         : { type: String, reflect: true },
     padding      : { type: String },
     paddingBottom: { type: String },
-    paddingTop   : { type: String }
-
+    paddingTop   : { type: String },
+    fontFamily   : { type: String, attribute: "font-family" },
+    fontWeight   : { type: String, attribute: "font-weight" }
   };
 
   constructor() {
@@ -17,7 +18,8 @@ export class BdP extends LitElement {
     this.padding = "";
     this.paddingBottom = "";
     this.paddingTop = "";
-
+    this.fontFamily = "";
+    this.fontWeight = "";
   }
 
   _getKindClass() {
@@ -38,6 +40,8 @@ export class BdP extends LitElement {
     if (this.padding) styles.push(`padding: ${this.padding};`);
     if (this.paddingBottom) styles.push(`padding-bottom: ${this.paddingBottom};`);
     if (this.paddingTop) styles.push(`padding-top: ${this.paddingTop};`);
+    if (this.fontFamily) styles.push(`font-family: ${this.fontFamily};`);
+    if (this.fontWeight) styles.push(`font-weight: ${this.fontWeight};`);
 
     const kindClass = this._getKindClass();
 

package/src/components/process-steps/process-steps.css.js

@@ -0,0 +1,95 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-processsteps-container {
+        color: var(--color-neutral-0);
+    background: linear-gradient(160deg, var(--color-neutral-800) 0%, #0b1626 100%);
+    padding: var(--spacing-64) var(--spacing-24) var(--spacing-64) var(--spacing-24);
+    box-sizing: border-box;
+  }
+
+  .bd-processsteps-title {
+    display: block;
+    margin: 0 0 var(--spacing-12);
+    color: var(--color-neutral-0, #fff);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .bd-processsteps-description {
+    display: block;
+    margin: 0 0 var(--spacing-40);
+    color: var(--color-neutral-300, #d1d5db);
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+    --typography-body-regular-fontWeight: var(--typography-fontWeight-bold, 700);
+
+  }
+
+  /* === GRID === */
+  .bd-processsteps-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-32);
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .bd-processsteps-step {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-processsteps-divider {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin-bottom: var(--spacing-24);
+  }
+
+  .bd-processsteps-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    margin-bottom: var(--spacing-16);
+    color: var(--color-blue-400, #60a5fa);
+  }
+
+  .bd-processsteps-icon-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .bd-processsteps-step-title {
+    display: block;
+    margin: 0 0 var(--spacing-8);
+    color: var(--color-neutral-0, #fff);
+  }
+
+  .bd-processsteps-step-description {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-300, #d1d5db);
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 899px) {
+    .bd-processsteps-grid {
+      grid-template-columns: 1fr;
+      gap: var(--spacing-32);
+    }
+
+    .bd-processsteps-container {
+      padding: var(--spacing-48) var(--spacing-24);
+    }
+  }
+`;

package/src/components/process-steps/process-steps.js

@@ -0,0 +1,72 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../icons/close-icon.js";
+import "../icons/globe-icon.js";
+import "../icons/guide-icon.js";
+import "../paragraph/paragraph.js";
+import processStepsCSS from "./process-steps.css.js";
+
+class ProcessSteps extends LitElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String },
+    steps      : { type: Array } // [{ icon: TemplateResult|String, title: String, description: String }]
+  };
+
+  static styles = [tokens, processStepsCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+    this.steps = [];
+  }
+
+  _renderIcon(icon) {
+    if (!icon) return nothing;
+    if (typeof icon === "string") {
+      return html`<img src="${icon}" alt="" class="bd-processsteps-icon-img" />`;
+    }
+    return icon;
+  }
+
+  render() {
+    return html`
+      <div class="bd-processsteps-container">
+        ${this.title
+          ? html`
+              <bd-h as="h2" class="bd-processsteps-title">
+                <slot name="title">${this.title}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        ${this.description
+          ? html`
+              <bd-p kind="regular" class="bd-processsteps-description">
+                <slot name="description">${this.description}</slot>
+              </bd-p>
+            `
+          : nothing}
+
+        <div class="bd-processsteps-grid">
+          ${this.steps.map(
+            (step) => html`
+              <div class="bd-processsteps-step">
+                <div class="bd-processsteps-divider"></div>
+                <div class="bd-processsteps-icon-wrap">${this._renderIcon(step.icon)}</div>
+                <bd-h as="h4" class="bd-processsteps-step-title">${step.title}</bd-h>
+                <bd-p kind="regular" class="bd-processsteps-step-description">${step.description}</bd-p>
+              </div>
+            `
+          )}
+        </div>
+
+        <slot name="steps"></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-process-steps", ProcessSteps);