@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/quick-answer/quick-answer.css.js

@@ -0,0 +1,67 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-quickanswer-container {
+    background: var(--color-blue-50, #eef4ff);
+    // border-radius: var(--radius-2xl, 16px);
+    padding: var(--spacing-32) var(--spacing-28) var(--spacing-32) var(--spacing-28);
+    box-sizing: border-box;
+  }
+
+  .bd-quickanswer-label {
+    color: var(--color-blue-500);
+    font-weight: var(--typography-fontWeight-medium);
+    margin: 0 0 var(--spacing-16);
+  }
+
+  .bd-quickanswer-text {
+    color: var(--color-neutral-800);
+    margin: 0;
+  }
+
+  .bd-quickanswer-divider {
+    border-top: 1px solid var(--color-blue-100, rgba(59, 130, 246, 0.15));
+    margin: var(--spacing-24) 0 var(--spacing-16);
+  }
+
+  .bd-quickanswer-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-24);
+  }
+
+  .bd-quickanswer-meta-item {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--spacing-8);
+  }
+
+.bd-quickanswer-meta-label {
+  color: var(--color-neutral-500);
+  font-size: var(--typography-fontSize-xxs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+  .bd-quickanswer-meta-value {
+    color: var(--color-neutral-1000);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  @media (max-width: 599px) {
+    .bd-quickanswer-container {
+      padding: var(--spacing-24);
+    }
+
+    .bd-quickanswer-meta {
+      flex-direction: column;
+      gap: var(--spacing-12);
+    }
+  }
+`;

package/src/components/quick-answer/quick-answer.js

@@ -0,0 +1,59 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../paragraph/paragraph.js";
+import quickAnswerCSS from "./quick-answer.css.js";
+
+class QuickAnswer extends LitElement {
+  static properties = {
+    label: { type: String },
+    text : { type: String },
+    items: { type: Array } // [{ label: String, value: String }]
+  };
+
+  static styles = [tokens, quickAnswerCSS];
+
+  constructor() {
+    super();
+    this.label = "Quick answer";
+    this.text = "";
+    this.items = [];
+  }
+
+  render() {
+    return html`
+      <div class="bd-quickanswer-container">
+        ${this.label
+          ? html`
+              <bd-p kind="normal" class="bd-quickanswer-label">
+                <slot name="label">${this.label}</slot>
+              </bd-p>
+            `
+          : nothing}
+
+        <bd-p kind="normal" class="bd-quickanswer-text">
+          <slot name="text">${this.text}</slot>
+        </bd-p>
+
+        <slot></slot>
+
+        ${this.items && this.items.length
+          ? html`
+              <div class="bd-quickanswer-divider"></div>
+              <div class="bd-quickanswer-meta">
+                ${this.items.map(
+                  (item) => html`
+                    <span class="bd-quickanswer-meta-item">
+                      <span class="bd-quickanswer-meta-label">${item.label}</span>
+                      <span class="bd-quickanswer-meta-value">${item.value}</span>
+                    </span>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-quick-answer", QuickAnswer);

package/src/components/quick-answer/quick-answer.stories.js

@@ -0,0 +1,160 @@
+import { html } from "lit";
+import "./quick-answer.js";
+
+export default {
+  title     : "Components/Quick Answer",
+  component : "bd-quick-answer",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**QuickAnswer** is a light-blue callout box that gives a short, direct answer to a
+question, followed by an optional row of labeled meta values (platform, status,
+vendor, etc.), separated by a divider.
+
+### Usage
+\`\`\`html
+<bd-quick-answer
+  label="Quick answer"
+  text="Bitdefender AI Guardian is a security layer for autonomous AI agents on macOS. It inspects what an agent does — tool calls, file access, prompts, skills — and returns a verdict of allowed, flagged or blocked against a policy baseline you set. It targets prompt injection, MCP tool poisoning, credential leakage and unauthorised actions. Currently in open BETA."
+  .items=\${[
+    { label: "PLATFORM", value: "macOS" },
+    { label: "STATUS", value: "Open BETA" },
+    { label: "MADE BY", value: "Bitdefender" }
+  ]}
+></bd-quick-answer>
+\`\`\`
+
+### Attributes
+| Attribute | Type   | Default          | Description                                    |
+|-----------|--------|-------------------|--------------------------------------------------|
+| \`label\`   | String | \`"Quick answer"\` | Small blue heading label above the body text     |
+| \`text\`    | String | \`""\`             | The main answer paragraph                         |
+| \`items\`   | Array  | \`[]\`             | Meta row entries: \`{ label, value }\` — omitted entirely if empty |
+
+### Slots
+| Slot      | Description                                            |
+|-----------|-----------------------------------------------------------|
+| (default) | Extra freeform content appended after the text, before the divider |
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: { control: "text", table: { category: "Content" } },
+    text : { control: "text", table: { category: "Content" } },
+    items: { control: "object", table: { category: "Content" } }
+  }
+};
+
+const render = (args) => html`
+  <bd-quick-answer
+    label=${args.label}
+    text=${args.text}
+    .items=${args.items}
+  ></bd-quick-answer>
+`;
+
+export const Default = {
+  name: "Default — AI Guardian",
+  args: {
+    label: "Quick answer",
+    text : "Bitdefender AI Guardian is a security layer for autonomous AI agents on macOS. It inspects what an agent does — tool calls, file access, prompts, skills — and returns a verdict of allowed, flagged or blocked against a policy baseline you set. It targets prompt injection, MCP tool poisoning, credential leakage and unauthorised actions. Currently in open BETA.",
+    items: [
+      { label: "PLATFORM", value: "macOS" },
+      { label: "STATUS", value: "Open BETA" },
+      { label: "MADE BY", value: "Bitdefender" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design: label, body text, divider, and a row of meta values."
+      }
+    }
+  }
+};
+
+export const NoMeta = {
+  name: "No Meta Row",
+  args: {
+    label: "Quick answer",
+    text : "A short, direct answer with no meta row underneath.",
+    items: []
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`items` left empty — no divider, no meta row rendered."
+      }
+    }
+  }
+};
+
+export const ManyMetaItems = {
+  name: "Many Meta Items",
+  args: {
+    label: "Quick answer",
+    text : "Demonstrates the meta row wrapping onto a second line when there are more entries than fit horizontally.",
+    items: [
+      { label: "PLATFORM", value: "macOS" },
+      { label: "STATUS", value: "Open BETA" },
+      { label: "MADE BY", value: "Bitdefender" },
+      { label: "PRICE", value: "Free" },
+      { label: "LICENSE", value: "Proprietary" },
+      { label: "LANGUAGE", value: "Swift" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "The meta row wraps automatically when it runs out of horizontal space."
+      }
+    }
+  }
+};
+
+export const NoLabel = {
+  name: "No Label",
+  args: {
+    label: "",
+    text : "The label is optional — omitting it removes the blue heading entirely.",
+    items: [
+      { label: "STATUS", value: "Open BETA" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`label` omitted — no heading above the body text."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    label: "Quick answer",
+    text : "Bitdefender AI Guardian is a security layer for autonomous AI agents on macOS.",
+    items: [
+      { label: "PLATFORM", value: "macOS" },
+      { label: "STATUS", value: "Open BETA" },
+      { label: "MADE BY", value: "Bitdefender" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit label, text, and meta items live."
+      }
+    }
+  }
+};

package/src/components/review/review-grid.css.js

@@ -0,0 +1,34 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bd-reviewgrid-title {
+    text-align: center;
+    margin: 0 0 var(--spacing-32);
+    color: var(--color-neutral-1000);
+  }
+
+  .bd-reviewgrid-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--bd-review-columns, 3), 1fr);
+    gap: var(--spacing-24);
+    width: 100%;
+  }
+
+  ::slotted(bd-review) {
+    min-width: 0;
+  }
+
+  /* Below md, every count collapses to a single column, regardless of how
+     many cards are slotted in. */
+  @media (max-width: 899px) {
+    .bd-reviewgrid-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;

package/src/components/review/review-grid.js

@@ -0,0 +1,63 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import reviewGridCSS from "./review-grid.css.js";
+import "./review.js";
+
+/**
+ * Responsive wrapper for bd-review cards.
+ *
+ *   <bd-review-grid title="What They Say">
+ *     <bd-review variant="tint">...</bd-review>
+ *     <bd-review variant="tint">...</bd-review>
+ *   </bd-review-grid>
+ *
+ * Column count is derived from how many bd-review children are slotted in,
+ * capped at 3 per row (extra cards wrap onto further rows at 3-per-row):
+ *   1 child  -> 1 column  (full width,  "col-md-12")
+ *   2 children -> 2 columns (half each,  "col-md-6")
+ *   3+ children -> 3 columns (third each, "col-md-4")
+ *
+ * Below the md breakpoint every count collapses to a single column.
+ */
+class BdReviewGrid extends LitElement {
+  static properties = {
+    title   : { type: String },
+    _columns: { state: true }
+  };
+
+  static styles = [tokens, reviewGridCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this._columns = 3;
+  }
+
+  get _items() {
+    return [...this.children].filter((el) => el.tagName === "BD-REVIEW");
+  }
+
+  _onSlotChange() {
+    const count = this._items.length;
+    this._columns = count <= 0 ? 1 : Math.min(count, 3);
+  }
+
+  render() {
+    return html`
+      ${this.title
+        ? html`<bd-h as="h2" class="bd-reviewgrid-title"><slot name="title">${this.title}</slot></bd-h>`
+        : nothing}
+
+      <div
+        class="bd-reviewgrid-grid"
+        style="--bd-review-columns: ${this._columns};"
+        role="list"
+      >
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-review-grid", BdReviewGrid);

package/src/components/review/review.css.js

@@ -0,0 +1,50 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    height: 100%;
+    font-family: var(--typography-fontFamily-sans);
+    box-sizing: border-box;
+  }
+
+  .bd-review-card {
+    background: var(--color-blue-50);
+    border-radius: var(--radius-3xl);
+    padding: var(--spacing-28);
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host([variant="neutral"]) .bd-review-card {
+    background: var(--color-neutral-25, #fafafa);
+  }
+
+  .bd-review-mark {
+    display: block;
+    margin-bottom: var(--spacing-8);
+  }
+
+  .bd-review-quote {
+    --bd-paragraph-color: var(--color-neutral-900);
+    margin-bottom: var(--spacing-16);
+    flex-grow: 1;
+  }
+
+  .bd-review-meta {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-review-source {
+    --bd-paragraph-color: var(--color-neutral-900);
+    margin: 0;
+  }
+
+  .bd-review-date {
+    color: var(--color-neutral-600);
+    font-size: var(--typography-fontSize-sm);
+  }
+`;

package/src/components/review/review.js

@@ -0,0 +1,58 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../icons/quote-icon.js";
+import "../paragraph/paragraph.js";
+import reviewCSS from "./review.css.js";
+
+/**
+ * A single testimonial/review card. Everything is slotted rather than
+ * passed as props, so callers can put arbitrary markup (a bd-p, a link,
+ * bold text) in any of the three slots:
+ *
+ *   <bd-review variant="tint">
+ *     <span slot="quote">If you're looking to buy a security suite...</span>
+ *     <span slot="source">PCMag</span>
+ *     <span slot="date">February 3, 2026</span>
+ *   </bd-review>
+ *
+ * `variant` is the only prop, since it's an appearance switch (background
+ * colour), not content:
+ *   "tint"    — light blue background (var(--color-blue-50))
+ *   "neutral" — light grey background (var(--color-neutral-25), #fafafa)
+ */
+class BdReview extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true } // "tint" | "neutral"
+  };
+
+  static styles = [tokens, reviewCSS];
+
+  constructor() {
+    super();
+    this.variant = "tint";
+  }
+
+  render() {
+    return html`
+      <div class="bd-review-card">
+        <bd-quote-icon
+          class="bd-review-mark"
+          width="34"
+          height="35"
+          color="var(--color-blue-500)"
+        ></bd-quote-icon>
+
+        <bd-p kind="regular" class="bd-review-quote">
+          <slot name="quote"></slot>
+        </bd-p>
+
+        <div class="bd-review-meta">
+          <bd-p kind="small" font-weight="bold" class="bd-review-source"><slot name="source"></slot></bd-p>
+          <span class="bd-review-date"><slot name="date"></slot></span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-review", BdReview);