@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/awards/awards-flex.css.js

@@ -0,0 +1,169 @@
+import { css } from "lit";
+
+export const awardsFlexCSS = css`
+  .bd-awardsflex-root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-8);
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--spacing-32);
+    border-radius: var(--radius-2xl, 16px);
+    text-align: center;
+    font-family: var(--typography-fontFamily-sans);
+    min-height: var(--bd-awardsflex-min-height, 320px);
+  }
+
+  .bd-awardsflex-root--white {
+    background: var(--color-neutral-0, #fff);
+    border: var(--spacing-2) solid var(--color-blue-50);
+    border-radius: var(--spacing-20);
+    padding: var(--spacing-64) var(--spacing-32) var(--spacing-64) var(--spacing-32);
+  }
+
+  .bd-awardsflex-root--tint {
+    background: var(--color-blue-50, #eef4ff);
+  }
+
+  /* === LAUREL ICON (always centered, above the headline) === */
+  .bd-awardsflex-laurel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-blue-500);
+    margin-bottom: var(--spacing-8);
+  }
+
+.bd-awardsflex-text-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-bottom: var(--spacing-32);
+}
+
+.bd-awardsflex-headline {
+  color: var(--color-neutral-1000);
+  margin: 0;
+}
+
+.bd-awardsflex-subtext {
+  color: var(--color-neutral-600);
+  max-width: 640px;
+  margin: 0;   /* was: margin: 0 0 var(--spacing-8); */
+}
+
+  /* === BADGES ROW (compact / grid layouts) === */
+  .bd-awardsflex-badges-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-24);
+    min-height: 64px;
+  }
+
+  .bd-awardsflex-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  /* === QUOTES LAYOUT — no card background, sits directly on the section bg === */
+  .bd-awardsflex-quotes-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--spacing-32);
+    width: 100%;
+  }
+
+  .bd-awardsflex-carousel-viewport {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .bd-awardsflex-carousel-track {
+    display: flex;
+    transition: transform 0.4s ease;
+    will-change: transform;
+  }
+
+  /* each slide/page holds a group of quote cards (default 3), shown side by side */
+  .bd-awardsflex-carousel-slide {
+    flex: 0 0 100%;
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-32);
+    box-sizing: border-box;
+  }
+
+  .bd-awardsflex-quote-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-8);
+    background: transparent;
+    padding: 0;
+    max-width: 220px;
+    flex: 1 1 200px;
+    box-sizing: border-box;
+    min-height: 160px;
+  }
+
+  .bd-awardsflex-quote-text {
+    font-size: var(--typography-fontSize-sm);
+    font-style: italic;
+    color: var(--color-neutral-800);
+    margin: 0;
+  }
+
+  .bd-awardsflex-quote-source {
+    font-size: var(--typography-fontSize-xs);
+    color: var(--color-neutral-500);
+    margin: 0;
+  }
+
+  /* === DOTS === */
+  .bd-awardsflex-dots {
+    display: flex;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-8);
+  }
+
+  .bd-awardsflex-dot {
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    border-radius: 50%;
+    border: none;
+    background: var(--color-neutral-300);
+    padding: 0;
+    cursor: pointer;
+    transition: background 0.2s ease, transform 0.2s ease;
+  }
+
+  .bd-awardsflex-dot.active {
+    background: var(--color-blue-500);
+    transform: scale(1.2);
+  }
+
+  @media (max-width: 599px) {
+    .bd-awardsflex-root {
+      padding: var(--spacing-24);
+      gap: var(--spacing-8);
+      min-height: var(--bd-awardsflex-min-height-mobile, 280px);
+    }
+
+    .bd-awardsflex-quotes-row,
+    .bd-awardsflex-carousel-slide {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .bd-awardsflex-quote-card {
+      max-width: none;
+    }
+  }
+`;

package/src/components/awards/awards-flex.js

@@ -0,0 +1,269 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../icons/av-comparatives-icon.js";
+import "../icons/best-brands-icon.js";
+import "../icons/laurel-icon.js";
+import "../icons/pc-mag-2024-icon.js";
+import "../icons/pc-mag-business-icon.js";
+import "../icons/pc-mag-icon.js";
+import "../icons/pc-mag-readers-icon.js";
+import "../icons/top-product-icon.js";
+import { awardsFlexCSS } from "./awards-flex.css.js";
+
+
+const GROUP_SIZE = 3; // how many quote cards are visible per carousel page
+
+export class AwardsFlex extends LitElement {
+  static properties = {
+    background   : { type: String },
+    layout       : { type: String },
+    carousel     : { type: Boolean },
+    autoplay     : { type: Boolean },
+    autoplayDelay: { type: Number, attribute: "autoplay-delay" },
+    headline     : { type: String },
+    subtext      : { type: String },
+    badges       : { type: Array },
+    _slide       : { state: true },
+    _paused      : { state: true }
+  };
+
+  static styles = [tokens, awardsFlexCSS];
+
+  constructor() {
+    super();
+    this.background = "white";
+    this.layout = "compact";
+    this.carousel = false;
+    this.autoplay = false;
+    this.autoplayDelay = 4000;
+    this.headline = "";
+    this.subtext = "";
+    this.badges = [];
+    this._slide = 0;
+    this._paused = false;
+    this._timer = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._maybeStartAutoplay();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopAutoplay();
+  }
+
+  updated(changed) {
+    if (
+      changed.has("autoplay") ||
+      changed.has("carousel") ||
+      changed.has("layout") ||
+      changed.has("badges") ||
+      changed.has("_paused")
+    ) {
+      // if the badge set shrank, make sure the current slide index is still valid
+      if (this._slide >= this._slidesCount) {
+        this._slide = 0;
+      }
+      this._maybeStartAutoplay();
+    }
+  }
+
+  get _groups() {
+    // chunk badges into pages of GROUP_SIZE for the carousel
+    const groups = [];
+    for (let i = 0; i < this.badges.length; i += GROUP_SIZE) {
+      groups.push(this.badges.slice(i, i + GROUP_SIZE));
+    }
+    return groups;
+  }
+
+  get _slidesCount() {
+    return this.layout === "quotes" ? this._groups.length : 0;
+  }
+
+  _maybeStartAutoplay() {
+    this._stopAutoplay();
+    const canAutoplay =
+      this.autoplay &&
+      this.carousel &&
+      this.layout === "quotes" &&
+      this._slidesCount > 1 &&
+      !this._paused;
+
+    if (!canAutoplay) return;
+
+    this._timer = setInterval(() => {
+      this._slide = (this._slide + 1) % this._slidesCount;
+    }, Math.max(1000, this.autoplayDelay));
+  }
+
+  _stopAutoplay() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = null;
+    }
+  }
+
+  _onMouseEnter() {
+    if (this.autoplay) this._paused = true;
+  }
+
+  _onMouseLeave() {
+    if (this.autoplay) this._paused = false;
+  }
+
+  _goTo(i) {
+    this._slide = i;
+  }
+
+  _iconHeight() {
+    if (this.layout === "grid") return 64;
+    if (this.layout === "quotes") return 56;
+    return 56;
+  }
+
+  _renderIcon(iconKey) {
+    const h = this._iconHeight();
+
+    switch (iconKey) {
+      case "pc-mag":
+        return html`<bd-pc-mag-icon height=${h}></bd-pc-mag-icon>`;
+      case "pc-mag-2024":
+        return html`<bd-pc-mag-2024-icon height=${h}></bd-pc-mag-2024-icon>`;
+      case "pc-mag-business":
+        return html`<bd-pc-mag-business-icon height=${h}></bd-pc-mag-business-icon>`;
+      case "pc-mag-readers":
+        return html`<bd-pc-mag-readers-icon height=${h}></bd-pc-mag-readers-icon>`;
+      case "av-comparatives":
+        return html`<bd-av-comparatives-icon height=${h}></bd-av-comparatives-icon>`;
+      case "best-brands":
+        return html`<bd-best-brands-icon height=${h}></bd-best-brands-icon>`;
+      case "top-product":
+        return html`<bd-top-product-icon height=${h}></bd-top-product-icon>`;
+      default:
+        return html`<span class="bd-awardsflex-badge-fallback" aria-hidden="true">?</span>`;
+    }
+  }
+
+  _renderBadge(award) {
+    const classes = `bd-awardsflex-badge ${award.type === "dark" ? "bd-awardsflex-badge--dark" : ""}`;
+    return html`
+      <div class="${classes}" data-award-id="${award.id}" role="listitem" aria-label="${award.label || ""}">
+        ${this._renderIcon(award.icon)}
+      </div>
+    `;
+  }
+
+  _renderQuoteCard(award) {
+    if (!award.quote) return nothing;
+    return html`
+      <div class="bd-awardsflex-quote-card">
+        ${this._renderBadge(award)}
+        <p class="bd-awardsflex-quote-text">"${award.quote}"</p>
+        ${award.source
+          ? html`<p class="bd-awardsflex-quote-source">${award.source}${award.date ? html`, ${award.date}` : nothing}</p>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  _renderDots() {
+    if (!this.carousel || this._slidesCount < 2) return nothing;
+    return html`
+      <div class="bd-awardsflex-dots" role="tablist" aria-label="Slide navigation">
+        ${this._groups.map(
+          (_, i) => html`
+            <button
+              class="bd-awardsflex-dot ${i === this._slide ? "active" : ""}"
+              role="tab"
+              aria-selected="${i === this._slide}"
+              aria-label="Go to page ${i + 1}"
+              @click=${() => this._goTo(i)}
+            ></button>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  _renderCarousel() {
+    const offset = -100 * this._slide;
+    return html`
+      <div
+        class="bd-awardsflex-carousel-viewport"
+        @mouseenter=${this._onMouseEnter}
+        @mouseleave=${this._onMouseLeave}
+        @focusin=${this._onMouseEnter}
+        @focusout=${this._onMouseLeave}
+      >
+        <div
+          class="bd-awardsflex-carousel-track"
+          style="transform: translateX(${offset}%);"
+        >
+          ${this._groups.map(
+            (group) => html`
+              <div class="bd-awardsflex-carousel-slide">
+                ${group.map((a) => this._renderQuoteCard(a))}
+              </div>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  _renderLaurel() {
+    // slot lets a consumer override the icon while bd-laurel-icon remains
+    // the default, matching the reference design (centered above the headline)
+    return html`
+      <div class="bd-awardsflex-laurel">
+        <slot name="icon">
+          <bd-laurel-icon width="80" height="64"></bd-laurel-icon>
+        </slot>
+      </div>
+    `;
+  }
+
+  render() {
+    const rootClasses = `bd-awardsflex-root bd-awardsflex-root--${this.background} bd-awardsflex-root--${this.layout}`;
+
+    return html`
+    <section class="${rootClasses}" aria-label="Awards and recognition">
+      ${this._renderLaurel()}
+      ${(this.headline || this.subtext)
+        ? html`
+            <div class="bd-awardsflex-text-group">
+              ${this.headline
+                ? html`<bd-h as="h3" class="bd-awardsflex-headline">${this.headline}</bd-h>`
+                : nothing}
+              ${this.subtext
+                ? html`<bd-p kind="large" class="bd-awardsflex-subtext">${this.subtext}</bd-p>`
+                : nothing}
+            </div>
+          `
+        : nothing}
+
+      ${this.layout === "quotes"
+        ? html`
+            ${this.carousel
+              ? this._renderCarousel()
+              : html`
+                  <div class="bd-awardsflex-quotes-row" role="list">
+                    ${this.badges.map((a) => this._renderQuoteCard(a))}
+                  </div>
+                `}
+            ${this._renderDots()}
+          `
+        : html`
+            <div class="bd-awardsflex-badges-row" role="list">
+              ${this.badges.map((a) => this._renderBadge(a))}
+            </div>
+          `}
+    </section>
+  `;
+  }
+}
+
+customElements.define("bd-awards-flex", AwardsFlex);