@repobit/dex-system-design 0.22.12 → 0.23.1

package/src/components/compare/compare.css.js

@@ -0,0 +1,237 @@
+import { css } from "lit";
+
+export default css`
+
+/* ──────────────────────────────────────────────────────────────
+   1. DESIGN TOKENS
+──────────────────────────────────────────────────────────────── */
+
+:host(compare-section) {
+  display: block;
+
+  --cs-bg:             #f5f6fa;
+  --cs-bar-primary-fg: #ffffff;
+  --cs-bar-height:     44px;
+  --cs-icon-color:     var(--color-blue-500);
+  --cs-gap:            1.5rem;
+}
+
+:host(compare-card),
+:host(compare-bar) {
+  display: block;
+}
+
+
+/* ──────────────────────────────────────────────────────────────
+   2. compare-section  INTERNALS
+──────────────────────────────────────────────────────────────── */
+
+.cs-section {
+  background: var(--cs-bg);
+  padding:    var(--spacing-64) var(--spacing-24);
+  box-sizing: border-box;
+}
+
+.cs-heading {
+  text-align: center;
+  max-width:  700px;
+  margin:     0 auto var(--spacing-40);
+}
+
+.cs-title {
+  margin: 0 0 var(--spacing-10);
+}
+
+.cs-subtitle {
+  margin: 0;
+}
+
+.cs-grid {
+  display:               grid;
+  grid-template-columns: repeat(var(--_cols, 2), 1fr);
+  gap:                   var(--cs-gap);
+  max-width:             1100px;
+  margin:                0 auto;
+}
+
+@media (max-width: 768px) {
+  .cs-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+
+/* ──────────────────────────────────────────────────────────────
+   3. compare-card  INTERNALS
+──────────────────────────────────────────────────────────────── */
+
+.card {
+  background:     var(--color-neutral-25);
+  border-radius:  var(--radius-3xl);
+  padding:        var(--spacing-24);
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--spacing-20);
+  box-sizing:     border-box;
+  height:         100%;
+}
+
+.card-header {
+  display:        flex;
+  flex-direction: column;
+  align-items:    flex-start;
+  gap:            var(--spacing-14);
+}
+
+.card-icon-wrap {
+  flex-shrink: 0;
+  width:       42px;
+  height:      39px;
+  filter: var(
+    --cs-icon-filter,
+    invert(29%) sepia(98%) saturate(1200%) hue-rotate(207deg) brightness(97%) contrast(97%)
+  );
+}
+
+.card-icon-wrap bd-img {
+  display: block;
+}
+
+.card-text-wrap {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--spacing-4);
+}
+
+.card-title {
+  margin: 0;
+}
+
+.card-description {
+  margin: 0;
+}
+
+.card-bars {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--spacing-6);
+}
+
+.card-footnote {
+  margin: 0;
+  color:  var(--color-neutral-900);
+}
+
+
+/* ──────────────────────────────────────────────────────────────
+   4. compare-bar  INTERNALS
+──────────────────────────────────────────────────────────────── */
+
+:host(compare-bar) {
+  width: 100%;
+}
+
+.bar-track {
+  position:      relative;
+  height:        var(--cs-bar-height, 44px);
+  border-radius: var(--radius-lg);
+  overflow:      hidden;
+  background:    none;
+  border:        1px solid var(--color-neutral-200);
+}
+
+.bar-fill {
+  position:   absolute;
+  inset:      0 auto 0 0;
+  height:     100%;
+  background: transparent;
+  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bar-content {
+  position:        relative;
+  z-index:         1;
+  display:         flex;
+  align-items:     center;
+  justify-content: space-between;
+  height:          100%;
+  padding:         0 var(--spacing-14);
+  box-sizing:      border-box;
+}
+
+.bar-label,
+.bar-score {
+  font-family: var(--typography-fontFamily-sans);
+  font-size:   var(--typography-body-regular-fontSize);
+  font-weight: 600;
+}
+
+/* ── primary variant ── */
+:host(compare-bar[variant="primary"]) .bar-fill {
+  background: var(--color-blue-500);
+}
+:host(compare-bar[variant="primary"]) .bar-label,
+:host(compare-bar[variant="primary"]) .bar-score {
+  color:       var(--cs-bar-primary-fg, #ffffff);
+  font-weight: var(--font-weight-mono-semibold);
+}
+
+/* ── secondary variant (default) ── */
+:host(compare-bar[variant="secondary"]) .bar-fill,
+:host(compare-bar:not([variant]))       .bar-fill {
+  background: var(--color-neutral-100);
+}
+:host(compare-bar[variant="secondary"]) .bar-label,
+:host(compare-bar:not([variant]))       .bar-label,
+:host(compare-bar[variant="secondary"]) .bar-score,
+:host(compare-bar:not([variant]))       .bar-score {
+  color: var(--color-neutral-900);
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   5. PRESET THEME OVERRIDES
+══════════════════════════════════════════════════════════════ */
+
+:host(compare-section.theme-green) {
+  --cs-bar-primary-fg: #ffffff;
+  --cs-icon-color:     #16a34a;
+  --cs-bg:             #f0fdf4;
+  --cs-icon-filter: invert(35%) sepia(72%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%);
+}
+
+:host(compare-section.theme-red) {
+  --cs-bar-primary-fg: #ffffff;
+  --cs-icon-color:     #dc2626;
+  --cs-bg:             #fff5f5;
+  --cs-icon-filter: invert(22%) sepia(90%) saturate(700%) hue-rotate(345deg) brightness(95%) contrast(95%);
+}
+
+:host(compare-section.theme-purple) {
+  --cs-bar-primary-fg: #ffffff;
+  --cs-icon-color:     #7c3aed;
+  --cs-bg:             #faf5ff;
+  --cs-icon-filter: invert(25%) sepia(80%) saturate(800%) hue-rotate(255deg) brightness(90%) contrast(95%);
+}
+
+:host(compare-section.theme-dark) {
+  --cs-bg:             #0f1117;
+  --cs-bar-primary-fg: #ffffff;
+  --cs-icon-color:     #60a5fa;
+  --cs-icon-filter: invert(65%) sepia(50%) saturate(500%) hue-rotate(195deg) brightness(105%) contrast(95%);
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   6. BAR SIZE VARIANTS
+══════════════════════════════════════════════════════════════ */
+
+:host(compare-section.bars-tall) {
+  --cs-bar-height: 56px;
+}
+
+:host(compare-section.bars-compact) {
+  --cs-bar-height: 34px;
+  --cs-gap:        var(--spacing-16);
+}
+`;

package/src/components/compare/compare.js

@@ -0,0 +1,253 @@
+import { LitElement, html } from "lit";
+import "../../components/image/image.js";
+import { tokens } from "../../tokens/tokens.js";
+import "../link/link.js";
+import compareCSS from "./compare.css";
+
+// ═══════════════════════════════════════════════════════════════
+//  compare-bar
+//  Attributes / Properties:
+//    label       {String}  – Brand or product name
+//    score       {Number}  – Numeric score
+//    max-score   {Number}  – Max possible score (default: 6)
+//    variant     {String}  – "primary" | "secondary"
+//    score-label {String}  – Optional override text for the score
+// ═══════════════════════════════════════════════════════════════
+
+class CompareBar extends LitElement {
+  static properties = {
+    label     : { type: String },
+    score     : { type: Number },
+    maxScore  : { type: Number, attribute: "max-score" },
+    variant   : { type: String },
+    scoreLabel: { type: String, attribute: "score-label" }
+  };
+
+  static styles = [tokens, compareCSS];
+
+  constructor() {
+    super();
+    this.label      = "";
+    this.score      = 0;
+    this.maxScore   = 6;
+    this.variant    = "secondary";
+    this.scoreLabel = "";
+  }
+
+  get _pct() {
+    const s = parseFloat(this.score)    || 0;
+    const m = parseFloat(this.maxScore) || 6;
+    if (m === 0) return 0;
+    return Math.min(100, Math.max(0, (s / m) * 100));
+  }
+
+  get _displayScore() {
+    return this.scoreLabel || this.score;
+  }
+
+  render() {
+    return html`
+      <div class="bar-track">
+        <div class="bar-fill" style="width: ${this._pct}%"></div>
+        <div class="bar-content">
+          <span class="bar-label">${this.label}</span>
+          <span class="bar-score">${this._displayScore}</span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("compare-bar", CompareBar);
+
+
+// ═══════════════════════════════════════════════════════════════
+//  compare-card
+//  Attributes / Properties:
+//    title         {String}  – Card heading
+//    description   {String}  – Explanatory subtitle
+//    footnote      {String}  – Small source text at the bottom
+//    footnote-href {String}  – URL for the linked part of the footnote
+//    icon-src      {String}  – Path to icon asset for bd-img
+//
+//  Slots:
+//    (default) – <compare-bar> elements
+// ═══════════════════════════════════════════════════════════════
+
+class CompareCard extends LitElement {
+  static properties = {
+    title       : { type: String },
+    description : { type: String },
+    footnote    : { type: String },
+    footnoteHref: { type: String, attribute: "footnote-href" },
+    iconSrc     : { type: String, attribute: "icon-src" }
+  };
+
+  static styles = [tokens, compareCSS];
+
+  constructor() {
+    super();
+    this.title        = "";
+    this.description  = "";
+    this.footnote     = "";
+    this.footnoteHref = "";
+    this.iconSrc      = "";
+  }
+
+  // Splits footnote text on "Source " and wraps everything after
+  // it in a bd-link. Falls back to plain text if no href given.
+  _renderFootnote() {
+    if (!this.footnote) return "";
+
+    if (!this.footnoteHref) {
+      return html`<bd-p kind="xsmall" class="card-footnote">${this.footnote}</bd-p>`;
+    }
+
+    const splitOn = "Source ";
+    const idx = this.footnote.indexOf(splitOn);
+
+    if (idx === -1) {
+      // No "Source " found — link the whole footnote text
+      return html`
+        <bd-p kind="xsmall" class="card-footnote">
+          <bd-link href="${this.footnoteHref}" target="_blank" font-size="12px" color="var(--color-neutral-900)" underline>
+            ${this.footnote}
+          </bd-link>
+        </bd-p>
+      `;
+    }
+
+    const before     = this.footnote.slice(0, idx + splitOn.length);
+    const linkedText = this.footnote.slice(idx + splitOn.length);
+
+    return html`
+      <bd-p kind="xsmall" class="card-footnote">
+        ${before}<bd-link href="${this.footnoteHref}" target="_blank" font-size="12px" color="var(--color-neutral-900)" underline>${linkedText}</bd-link>
+      </bd-p>
+    `;
+  }
+
+  render() {
+    const isMobile = window.matchMedia("(max-width: 767px)").matches;
+
+    return html`
+      <div class="card">
+        <div class="card-header">
+
+          ${this.iconSrc
+            ? html`
+            <div class="card-icon-wrap" aria-hidden="true">
+              <bd-img
+                src="${this.iconSrc}"
+                alt=""
+                width="42"
+                height="39"
+                fit="contain"
+                radius="none"
+                shadow="none"
+                loading="eager"
+              ></bd-img>
+            </div>
+          `
+            : ""}
+
+          <div class="card-text-wrap">
+            ${isMobile
+                ? html`<bd-h as="h5" class="card-title">${this.title}</bd-h>`
+                : html`<bd-h as="h4" class="card-title">${this.title}</bd-h>`
+            }
+            ${this.description
+              ? html`
+              <bd-p kind="${isMobile ? "small" : "large"}" class="card-description">
+                ${this.description}
+              </bd-p>
+            `
+              : ""}
+          </div>
+
+        </div>
+
+        <div class="card-bars">
+          <slot></slot>
+        </div>
+
+        ${this._renderFootnote()}
+      </div>
+    `;
+  }
+}
+
+customElements.define("compare-card", CompareCard);
+
+
+// ═══════════════════════════════════════════════════════════════
+//  compare-section
+//  Attributes / Properties:
+//    title    {String}  – Section heading
+//    subtitle {String}  – Optional subheading
+//    columns  {Number}  – Column count override (default: 2)
+//    gap      {String}  – Gap between cards e.g. "16px" or "var(--spacing-4)"
+//
+//  Slots:
+//    (default) – <compare-card> elements
+// ═══════════════════════════════════════════════════════════════
+
+class CompareSection extends LitElement {
+  static properties = {
+    title   : { type: String },
+    subtitle: { type: String },
+    columns : { type: Number },
+    gap     : { type: String }
+  };
+
+  static styles = [tokens, compareCSS];
+
+  constructor() {
+    super();
+    this.title    = "";
+    this.subtitle = "";
+    this.columns  = 2;
+    this.gap      = "";
+  }
+
+  render() {
+    const isMobile = window.matchMedia("(max-width: 767px)").matches;
+    const gapStyle = this.gap
+      ? `--_cols: ${this.columns}; --cs-gap: ${this.gap}`
+      : `--_cols: ${this.columns}`;
+
+    return html`
+      <section class="cs-section">
+        ${this.title || this.subtitle
+          ? html`
+          <div class="cs-heading">
+            ${this.title
+              ? html`
+              ${isMobile
+                  ? html`<bd-h as="h4" class="cs-title">${this.title}</bd-h>`
+                  : html`<bd-h as="h3" class="cs-title">${this.title}</bd-h>`
+              }
+            `
+              : ""}
+            ${this.subtitle
+              ? html`
+              <bd-p kind="${isMobile ? "small" : "regular"}" class="cs-subtitle">
+                ${this.subtitle}
+              </bd-p>
+            `
+              : ""}
+          </div>
+        `
+          : ""}
+
+        <div class="cs-grid" style="${gapStyle}">
+          <slot></slot>
+        </div>
+      </section>
+    `;
+  }
+}
+
+customElements.define("bd-compare-section", CompareSection);
+
+export { CompareBar, CompareCard, CompareSection };