@repobit/dex-system-design 0.23.94 → 0.23.96

package/src/blog/src/atoms/blog-product-upsell.js

@@ -0,0 +1,168 @@
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import { minWidth } from '../breakpoints.js';
+
+/**
+ * In-article product upsell — copy, CTA, and optional social proof.
+ *
+ * @property {string} headline
+ * @property {string} description
+ * @property {string} ctaLabel
+ * @property {string} ctaHref
+ * @property {string} socialProof
+ */
+export class BlogProductUpsell extends BlogElement {
+  static properties = {
+    headline   : { type: String },
+    description: { type: String },
+    ctaLabel   : { type: String, attribute: 'cta-label' },
+    ctaHref    : { type: String, attribute: 'cta-href' },
+    socialProof: { type: String, attribute: 'social-proof' }
+  };
+
+  constructor() {
+    super();
+    this.headline = 'Want stronger protection against scams and online fraud?';
+    this.description =
+      'Bitdefender helps block phishing, malicious links, and identity threats across your devices. Try it free for 30 days.';
+    this.ctaLabel = 'Get Bitdefender Total Security';
+    this.ctaHref = '#';
+    this.socialProof = '★ 4.8 · Trusted by millions worldwide';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .upsell {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--blog-card-gap);
+        padding: var(--blog-card-padding);
+        border-radius: var(--blog-newsletter-borderRadius);
+        background: var(--color-surface-subtle);
+        text-align: center;
+      }
+
+      .upsell__copy {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-4);
+        min-width: 0;
+      }
+
+      .upsell__headline {
+        margin: 0;
+        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);
+      }
+
+      .upsell__description {
+        margin: 0;
+        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);
+      }
+
+      .upsell__actions {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--blog-newsletter-form-gap);
+      }
+
+      .upsell__cta {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--button-size-small-gap);
+        box-sizing: border-box;
+        min-height: var(--button-size-small-height);
+        padding: var(--spacing-8) var(--spacing-16);
+        border: var(--button-shared-borderWidth) solid
+          var(--button-primary-border-default);
+        border-radius: var(--button-size-small-borderRadius);
+        background: var(--button-primary-background-default);
+        cursor: pointer;
+        font-family: var(--button-shared-fontFamily);
+        font-size: var(--button-size-small-fontSize);
+        font-weight: var(--button-shared-fontWeight);
+        line-height: var(--button-shared-lineHeight);
+        letter-spacing: var(--button-shared-letterSpacing);
+        color: var(--button-primary-text-default);
+        text-align: center;
+        text-decoration: none;
+        transition: var(--button-shared-transition-properties)
+          var(--button-shared-transition-duration)
+          var(--button-shared-transition-easing);
+      }
+
+      .upsell__cta:hover {
+        background: var(--button-primary-background-hover);
+        border-color: var(--button-primary-border-hover);
+      }
+
+      .upsell__cta:active {
+        background: var(--button-primary-background-active);
+        border-color: var(--button-primary-border-active);
+      }
+
+      .upsell__cta:focus-visible {
+        outline: var(--button-shared-focus-outline);
+        outline-offset: var(--button-shared-focus-outlineOffset);
+      }
+
+      .upsell__social {
+        margin: 0;
+        font-family: var(--blog-newsletter-disclaimer-fontFamily);
+        font-size: var(--blog-newsletter-disclaimer-fontSize);
+        font-weight: var(--blog-newsletter-disclaimer-fontWeight);
+        line-height: var(--blog-newsletter-disclaimer-lineHeight);
+        color: var(--blog-newsletter-disclaimer-color);
+        text-align: center;
+      }
+
+      ${unsafeCSS(minWidth('lg'))} {
+        .upsell {
+          flex-direction: row;
+          align-items: center;
+          text-align: left;
+        }
+
+        .upsell__actions {
+          flex: none;
+          align-items: center;
+        }
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <aside class="upsell" part="upsell" aria-label="Related product">
+        <div class="upsell__copy" part="copy">
+          <p class="upsell__headline" part="headline">${this.headline}</p>
+          <p class="upsell__description" part="description">${this.description}</p>
+        </div>
+
+        <div class="upsell__actions" part="actions">
+          <a class="upsell__cta" part="cta" href=${this.ctaHref}>${this.ctaLabel}</a>
+          ${this.socialProof
+            ? html`<p class="upsell__social" part="social">${this.socialProof}</p>`
+            : nothing}
+        </div>
+      </aside>
+    `;
+  }
+}
+
+customElements.define('blog-product-upsell', BlogProductUpsell);

package/src/blog/src/atoms/blog-related-articles.js

@@ -0,0 +1,326 @@
+import { css, html, unsafeCSS } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import { minWidth } from '../breakpoints.js';
+import './blog-meta.js';
+import './blog-tag.js';
+
+/**
+ * Post-article related articles — card grid with image, principle tag, meta, title, and excerpt.
+ *
+ * @property {string} title
+ * @property {string} seeAllLabel
+ * @property {Array<{ title: string, href: string, excerpt?: string, principle?: string, date?: string, datetime?: string, readingTime?: string, image?: string, imageAlt?: string }>} items
+ */
+export class BlogRelatedArticles extends BlogElement {
+  static properties = {
+    title      : { type: String },
+    seeAllLabel: { type: String, attribute: 'see-all-label' },
+    items      : { type: Array },
+    _itemCount : { type: Number, attribute: 'item-count', reflect: true },
+    _expanded  : { type: Boolean, state: true }
+  };
+
+  constructor() {
+    super();
+    this.title = 'Related articles';
+    this.seeAllLabel = 'See all related articles';
+    this.items = [];
+    this._itemCount = 0;
+    this._expanded = false;
+  }
+
+  willUpdate(changedProperties) {
+    if (changedProperties.has('items')) {
+      this._itemCount = Math.min(this.items.length, 4);
+    }
+  }
+
+  _expandAll() {
+    this._expanded = true;
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .related__title {
+        margin: 0 0 var(--blog-related-title-spacing-bottom);
+        font-family: var(--blog-related-title-fontFamily);
+        font-size: var(--blog-related-title-fontSize);
+        font-weight: var(--blog-related-title-fontWeight);
+        line-height: var(--blog-related-title-lineHeight);
+        color: var(--blog-related-title-color);
+      }
+
+      .related__grid {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: grid;
+        gap: var(--blog-related-grid-gap-mobile);
+        grid-template-columns: 1fr;
+      }
+
+      .related__grid > li + li {
+        padding-top: var(--blog-related-grid-gap-mobile);
+        border-top: var(--blog-related-card-divider-width) solid
+          var(--blog-related-card-divider-color);
+      }
+
+      :host(:not([expanded])) .related__grid > li:nth-child(n + 3) {
+        display: none;
+      }
+
+      .related__see-all {
+        display: inline-block;
+        margin: var(--blog-related-see-all-spacing-top) 0 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        font-family: var(--blog-related-see-all-fontFamily);
+        font-size: var(--blog-related-see-all-fontSize);
+        font-weight: var(--blog-related-see-all-fontWeight);
+        line-height: var(--typography-lineHeight-normal);
+        color: var(--blog-related-see-all-color);
+        text-decoration: underline;
+        text-underline-offset: var(--blog-related-see-all-underline-offset);
+      }
+
+      .related__see-all:hover {
+        color: var(--blog-related-see-all-hover-color);
+      }
+
+      .related__see-all:focus-visible {
+        outline: var(--focus-outline-traditional);
+        outline-offset: var(--focus-outline-offset);
+      }
+
+      ${unsafeCSS(minWidth('md'))} {
+        .related__grid {
+          gap: var(--blog-related-grid-gap);
+        }
+
+        .related__grid > li + li {
+          padding-top: 0;
+          border-top: 0;
+        }
+
+        :host(:not([expanded])) .related__grid > li:nth-child(n + 3) {
+          display: block;
+        }
+
+        .related__see-all {
+          display: none;
+        }
+
+        .related__excerpt {
+          display: block;
+        }
+      }
+
+      ${unsafeCSS(minWidth('md'))} {
+        :host([item-count='4']) .related__grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+
+      ${unsafeCSS(minWidth('lg'))} {
+        :host([item-count='4']) .related__grid {
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        :host([item-count='3']) .related__grid {
+          grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+        }
+
+        :host([item-count='3']) .related__grid > li {
+          grid-column: span calc(var(--grid-columns) / 3);
+        }
+
+        :host([item-count='2']) .related__grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+
+      .related__link {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        gap: var(--blog-related-card-image-gap);
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .related__link:hover .related__card-title {
+        color: var(--color-text-link-hover);
+      }
+
+      .related__link:focus-visible {
+        outline: var(--focus-outline-traditional);
+        outline-offset: var(--focus-outline-offset);
+        border-radius: var(--blog-related-card-image-borderRadius);
+      }
+
+      .related__media {
+        position: relative;
+        aspect-ratio: var(--blog-related-card-image-aspect-ratio-mobile);
+        border-radius: var(--blog-related-card-image-borderRadius);
+        background: var(--blog-content-image-background);
+        overflow: hidden;
+      }
+
+      ${unsafeCSS(minWidth('md'))} {
+        .related__media {
+          aspect-ratio: var(--blog-related-card-image-aspect-ratio);
+        }
+      }
+
+      .related__image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .related__tag {
+        position: absolute;
+        top: var(--blog-related-card-tag-inset);
+        left: var(--blog-related-card-tag-inset);
+        z-index: 1;
+      }
+
+      .related__tag blog-tag {
+        pointer-events: none;
+      }
+
+      .related__body {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: var(--blog-related-card-body-gap);
+      }
+
+      .related__meta {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--blog-meta-gap);
+        margin: 0;
+        font-size: var(--blog-related-card-meta-fontSize);
+      }
+
+      .related__card-title {
+        margin: 0;
+        font-family: var(--blog-related-card-title-fontFamily);
+        font-size: var(--blog-related-card-title-fontSize);
+        font-weight: var(--blog-related-card-title-fontWeight);
+        line-height: var(--blog-related-card-title-lineHeight);
+        color: var(--blog-related-card-title-color);
+      }
+
+      .related__excerpt {
+        display: none;
+        margin: 0;
+        flex: 1;
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-related-card-excerpt-fontSize);
+        font-weight: var(--typography-fontWeight-normal);
+        line-height: var(--typography-lineHeight-relaxed);
+        color: var(--blog-related-card-excerpt-color);
+      }
+    `
+  ];
+
+  updated(changed) {
+    if (changed.has('_expanded')) {
+      this.toggleAttribute('expanded', this._expanded);
+    }
+  }
+
+  /** @param {import('lit').TemplateResult} item */
+  _renderCard(item) {
+    return html`
+      <li part="item">
+        <a class="related__link" part="link" href=${item.href}>
+          ${item.image
+            ? html`<div class="related__media" part="media">
+                <img
+                  class="related__image"
+                  part="image"
+                  src=${item.image}
+                  alt=${item.imageAlt ?? ''}
+                  loading="lazy"
+                />
+                ${item.principle
+                  ? html`<div class="related__tag" part="tag">
+                      <blog-tag label=${item.principle} variant="brand"></blog-tag>
+                    </div>`
+                  : null}
+              </div>`
+            : null}
+          <div class="related__body" part="body">
+            ${item.date || item.readingTime
+              ? html`<footer class="related__meta" part="meta">
+                  ${item.date
+                    ? html`<blog-meta
+                        type="date"
+                        value=${item.date}
+                        datetime=${item.datetime ?? ''}
+                      ></blog-meta>`
+                    : null}
+                  ${item.date && item.readingTime
+                    ? html`<blog-meta type="separator"></blog-meta>`
+                    : null}
+                  ${item.readingTime
+                    ? html`<blog-meta
+                        type="reading-time"
+                        value=${item.readingTime}
+                      ></blog-meta>`
+                    : null}
+                </footer>`
+              : null}
+            <h3 class="related__card-title" part="card-title">${item.title}</h3>
+            ${item.excerpt
+              ? html`<p class="related__excerpt" part="excerpt">${item.excerpt}</p>`
+              : null}
+          </div>
+        </a>
+      </li>
+    `;
+  }
+
+  render() {
+    const items = this.items.slice(0, 4);
+
+    if (!items.length) {
+      return null;
+    }
+
+    const showSeeAll = items.length > 2 && !this._expanded;
+
+    return html`
+      <section class="related" part="related" aria-label=${this.title}>
+        <h2 class="related__title" part="title">${this.title}</h2>
+        <ul class="related__grid" part="grid">
+          ${items.map((item) => this._renderCard(item))}
+        </ul>
+        ${showSeeAll
+          ? html`<button
+              type="button"
+              class="related__see-all"
+              part="see-all"
+              @click=${this._expandAll}
+            >
+              ${this.seeAllLabel}
+            </button>`
+          : null}
+      </section>
+    `;
+  }
+}
+
+customElements.define('blog-related-articles', BlogRelatedArticles);

package/src/blog/src/atoms/blog-related-label.js

@@ -0,0 +1,30 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/** Italic section label before related links — Word: italic + colon at body size. */
+export class BlogRelatedLabel extends BlogElement {
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      p {
+        margin: 0;
+        font-family: var(--blog-related-label-fontFamily);
+        font-size: var(--blog-related-label-fontSize);
+        font-weight: var(--blog-related-label-fontWeight);
+        font-style: var(--blog-related-label-fontStyle);
+        line-height: var(--blog-related-label-lineHeight);
+        color: var(--blog-related-label-color);
+      }
+    `
+  ];
+
+  render() {
+    return html`<p part="related-label"><slot></slot></p>`;
+  }
+}
+
+customElements.define('blog-related-label', BlogRelatedLabel);