@repobit/dex-system-design 0.23.94 → 0.23.96

package/src/blog/src/atoms/blog-report-promo.js

@@ -0,0 +1,250 @@
+import { css, html, unsafeCSS } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import { minWidth } from '../breakpoints.js';
+
+/**
+ * Inline report download promo — cover crop, title, description, and CTA.
+ *
+ * @property {string} title
+ * @property {string} description
+ * @property {string} ctaLabel
+ * @property {string} ctaHref
+ * @property {string} imageSrc
+ * @property {string} imageAlt
+ */
+export class BlogReportPromo extends BlogElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String },
+    ctaLabel   : { type: String, attribute: 'cta-label' },
+    ctaHref    : { type: String, attribute: 'cta-href' },
+    imageSrc   : { type: String, attribute: 'image-src' },
+    imageAlt   : { type: String, attribute: 'image-alt' }
+  };
+
+  constructor() {
+    super();
+    this.title = 'The Global Scam Intelligence Report 2026';
+    this.description =
+      "We block billions of scams every year. Here's what we learned from the front-lines battle with a 1-trilion dollar business model.";
+    this.ctaLabel = 'Download report';
+    this.ctaHref = '#';
+    this.imageSrc = '/psd-4.jpg';
+    this.imageAlt = 'The Global Scam Intelligence Report 2026 cover preview';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+         .promo {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        box-sizing: border-box;
+        border-radius: var(--blog-report-promo-borderRadius);
+        background: var(--blog-report-promo-background);
+      }
+
+      .promo__media {
+      position: relative;
+      flex: none;
+      width: 100%;
+      aspect-ratio: var(--blog-report-promo-media-aspect-ratio);
+      overflow: hidden;
+      // border-radius: var(--blog-report-promo-borderRadius) var(--blog-report-promo-borderRadius)  var(--blog-report-promo-borderRadius)  var(--blog-report-promo-borderRadius);
+    }
+
+      .promo__image {
+        position: absolute;
+        left: 0;
+        top: var(--blog-report-promo-image-crop-offset);
+        display: block;
+        width: 100%;
+        height: calc(100% * var(--blog-report-promo-image-height-ratio));
+        max-width: none;
+        object-fit: contain;
+        object-position: center top;
+          border-radius: var(--blog-report-promo-borderRadius) var(--blog-report-promo-borderRadius) 0 0;
+
+      }
+
+      .promo__main {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--blog-report-promo-gap);
+        min-width: 0;
+        padding: var(--blog-report-promo-padding);
+        text-align: center;
+      }
+
+      .promo__content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--blog-report-promo-body-gap);
+        min-width: 0;
+      }
+
+      .promo__title {
+        margin: 0;
+        font-family: var(--blog-card-title-fontFamily);
+        font-size: var(--blog-report-promo-title-fontSize);
+        font-weight: var(--blog-report-promo-title-fontWeight);
+        line-height: var(--blog-report-promo-title-lineHeight);
+        color: var(--blog-report-promo-title-color);
+      }
+
+      .promo__description {
+        margin: 0;
+        font-family: var(--blog-newsletter-description-fontFamily);
+        font-size: var(--blog-report-promo-description-fontSize);
+        font-weight: var(--blog-newsletter-description-fontWeight);
+        line-height: var(--blog-report-promo-description-lineHeight);
+        color: var(--blog-report-promo-description-color);
+      }
+
+      .promo__actions {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .promo__cta {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--button-size-medium-gap);
+        box-sizing: border-box;
+        min-height: var(--button-size-medium-height);
+        padding: 0 var(--button-size-medium-padding-horizontal);
+        border: var(--button-shared-borderWidth) solid
+          var(--button-cta-border-default);
+        border-radius: var(--button-size-medium-borderRadius);
+        background: var(--button-cta-background-default);
+        cursor: pointer;
+        font-family: var(--button-shared-fontFamily);
+        font-size: var(--button-size-medium-fontSize);
+        font-weight: var(--button-shared-fontWeight);
+        line-height: var(--button-shared-lineHeight);
+        letter-spacing: var(--button-shared-letterSpacing);
+        color: var(--button-cta-text-default);
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+        transition: var(--button-shared-transition-properties)
+          var(--button-shared-transition-duration)
+          var(--button-shared-transition-easing);
+      }
+
+      .promo__cta:hover {
+        background: var(--button-cta-background-hover);
+        border-color: var(--button-cta-border-hover);
+      }
+
+      .promo__cta:active {
+        background: var(--button-cta-background-active);
+        border-color: var(--button-cta-border-active);
+      }
+
+      .promo__cta:focus-visible {
+        outline: var(--button-shared-focus-outline);
+        outline-offset: var(--button-shared-focus-outlineOffset);
+      }
+
+      ${unsafeCSS(minWidth('lg'))} {
+        .promo {
+          flex-direction: row;
+          align-items: stretch;
+        }
+
+        .promo__media {
+          width: var(--blog-report-promo-media-width-desktop);
+          height: auto;
+          aspect-ratio: auto;
+          align-self: stretch;
+        }
+
+        .promo__image {
+          top: 50%;
+          left: auto;
+          right: 0;
+          width: var(--blog-report-promo-image-width-desktop);
+          height: auto;
+          transform: translateY(-50%);
+          object-fit: initial;
+          object-position: initial;
+            border-radius: var(--blog-report-promo-borderRadius) var(--blog-report-promo-borderRadius) 0 0;
+
+        }
+
+        .promo__main {
+          flex-direction: row;
+          align-items: center;
+          padding: var(--blog-report-promo-padding) var(--blog-report-promo-padding) var(--blog-report-promo-padding) var(--blog-report-promo-padding);
+          text-align: left;
+        }
+
+        .promo__content {
+          flex: 1;
+          gap: var(--spacing-4);
+        }
+
+        .promo__title {
+          font-family: var(--blog-takeaways-title-fontFamily);
+          font-size: var(--blog-takeaways-title-fontSize);
+          font-weight: var(--blog-takeaways-title-fontWeight);
+          line-height: var(--blog-takeaways-title-lineHeight);
+          color: var(--blog-takeaways-title-color);
+        }
+
+        .promo__description {
+          font-family: var(--blog-newsletter-description-fontFamily);
+          font-size: var(--blog-newsletter-description-fontSize);
+          font-weight: var(--blog-newsletter-description-fontWeight);
+          line-height: var(--blog-newsletter-description-lineHeight);
+          color: var(--blog-prose-color);
+        }
+
+        .promo__actions {
+          flex: none;
+        }
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <section class="promo" part="promo" aria-label=${this.title}>
+        <div class="promo__media" part="media">
+          <img
+            class="promo__image"
+            part="image"
+            src=${this.imageSrc}
+            alt=${this.imageAlt}
+            loading="lazy"
+          />
+        </div>
+
+        <div class="promo__main" part="main">
+          <div class="promo__content" part="content">
+            <h2 class="promo__title" part="title">${this.title}</h2>
+            <p class="promo__description" part="description">${this.description}</p>
+          </div>
+
+          <div class="promo__actions" part="actions">
+            <a class="promo__cta" part="cta" href=${this.ctaHref}>${this.ctaLabel}</a>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+}
+
+customElements.define('blog-report-promo', BlogReportPromo);

package/src/blog/src/atoms/blog-standout.js

@@ -0,0 +1,78 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import { renderInlineContent } from '../content/render-inline-content.js';
+
+/**
+ * Bold italic standout text — matches Word dek / quote / related-link styling.
+ * Docx: bold + italic + 20pt (sz 40).
+ */
+export class BlogStandout extends BlogElement {
+  static properties = {
+    href   : { type: String },
+    content: { type: Array }
+  };
+
+  constructor() {
+    super();
+    this.href = '';
+    this.content = [];
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      p {
+        margin: 0;
+        font-family: var(--blog-standout-fontFamily);
+        font-size: var(--blog-standout-fontSize);
+        font-weight: var(--blog-standout-fontWeight);
+        font-style: var(--blog-standout-fontStyle);
+        line-height: var(--blog-standout-lineHeight);
+        color: var(--blog-standout-color);
+      }
+
+      a {
+        font: inherit;
+        font-style: inherit;
+        color: var(--color-text-link);
+        text-decoration: var(--typography-link-default-textDecoration-default);
+      }
+
+      a:hover {
+        color: var(--color-text-link-hover);
+        text-decoration: var(--typography-link-default-textDecoration-hover);
+      }
+
+      a:focus-visible {
+        outline: var(--focus-outline-traditional);
+        outline-offset: var(--focus-outline-offset);
+      }
+
+      ::slotted(blog-link),
+      blog-link {
+        display: inline;
+      }
+    `
+  ];
+
+  render() {
+    const hasLinks = this.content.some((segment) => segment.type === 'link');
+    const body = hasLinks
+      ? renderInlineContent(this.content)
+      : html`<slot></slot>`;
+
+    if (this.href && !hasLinks) {
+      return html`<p part="standout">
+        <a href=${this.href} part="link">${body}</a>
+      </p>`;
+    }
+
+    return html`<p part="standout">${body}</p>`;
+  }
+}
+
+customElements.define('blog-standout', BlogStandout);

package/src/blog/src/atoms/blog-subhead.js

@@ -0,0 +1,32 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * In-body section label — Word: bold at body size (14pt), not a styled Heading.
+ */
+export class BlogSubhead extends BlogElement {
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+        scroll-margin-top: var(--blog-toc-scroll-offset);
+      }
+
+      p {
+        margin: 0;
+        font-family: var(--blog-prose-subhead-fontFamily);
+        font-size: var(--blog-prose-subhead-fontSize);
+        font-weight: var(--blog-prose-subhead-fontWeight);
+        line-height: var(--blog-prose-subhead-lineHeight);
+        color: var(--blog-prose-subhead-color);
+      }
+    `
+  ];
+
+  render() {
+    return html`<p part="subhead"><slot></slot></p>`;
+  }
+}
+
+customElements.define('blog-subhead', BlogSubhead);