@repobit/dex-system-design 0.23.95 → 0.23.97

package/src/blog/src/atoms/blog-most-popular.js

@@ -0,0 +1,146 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * Page-level popular articles — thumbnail, title, and date.
+ *
+ * @property {string} title
+ * @property {Array<{ title: string, href: string, date?: string, datetime?: string, image?: string, imageAlt?: string }>} items
+ */
+export class BlogMostPopular extends BlogElement {
+  static properties = {
+    title: { type: String },
+    items: { type: Array }
+  };
+
+  constructor() {
+    super();
+    this.title = 'Most popular';
+    this.items = [];
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .popular__title {
+        margin: 0 0 var(--blog-popular-title-spacing-bottom);
+        font-family: var(--blog-popular-title-fontFamily);
+        font-size: var(--blog-popular-title-fontSize);
+        font-weight: var(--blog-popular-title-fontWeight);
+        line-height: var(--blog-popular-title-lineHeight);
+        color: var(--blog-popular-title-color);
+      }
+
+      .popular__list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .popular__list li + li {
+        margin-top: var(--blog-popular-item-gap);
+      }
+
+      .popular__link {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--blog-popular-item-inner-gap);
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .popular__link:hover .popular__item-title {
+        color: var(--blog-popular-link-hover-color);
+        text-decoration: underline;
+      }
+
+      .popular__link:focus-visible {
+        outline: var(--focus-outline-traditional);
+        outline-offset: var(--focus-outline-offset);
+        border-radius: var(--radius-sm);
+      }
+
+      .popular__thumb {
+        flex: 0 0 var(--blog-popular-thumb-width);
+        width: var(--blog-popular-thumb-width);
+        aspect-ratio: var(--blog-popular-thumb-aspect-ratio);
+        border-radius: var(--blog-popular-thumb-borderRadius);
+        object-fit: cover;
+        background: var(--blog-popular-thumb-background);
+      }
+
+      .popular__item-body {
+        min-width: 0;
+      }
+
+      .popular__item-title {
+        margin: 0 0 var(--spacing-4);
+        font-family: var(--blog-popular-item-title-fontFamily);
+        font-size: var(--blog-popular-item-title-fontSize);
+        font-weight: var(--blog-popular-item-title-fontWeight);
+        line-height: var(--blog-popular-item-title-lineHeight);
+        color: var(--blog-popular-item-title-color);
+      }
+
+      .popular__item-date {
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-popular-item-date-fontSize);
+        font-weight: var(--typography-fontWeight-normal);
+        line-height: var(--typography-lineHeight-normal);
+        color: var(--blog-popular-item-date-color);
+        text-transform: uppercase;
+        letter-spacing: var(--typography-letterSpacing-wide);
+      }
+    `
+  ];
+
+  render() {
+    if (!this.items.length) {
+      return null;
+    }
+
+    return html`
+      <section class="popular" part="popular" aria-label=${this.title}>
+        <h2 class="popular__title" part="title">${this.title}</h2>
+        <ol class="popular__list" part="list">
+          ${this.items.map(
+            (item) => html`
+              <li part="item">
+                <a class="popular__link" part="link" href=${item.href}>
+                  ${item.image
+                    ? html`<img
+                        class="popular__thumb"
+                        part="thumb"
+                        src=${item.image}
+                        alt=${item.imageAlt ?? ''}
+                        loading="lazy"
+                      />`
+                    : null}
+                  <span class="popular__item-body">
+                    <p class="popular__item-title" part="item-title">
+                      ${item.title}
+                    </p>
+                    ${item.date
+                      ? html`<time
+                          class="popular__item-date"
+                          part="item-date"
+                          datetime=${item.datetime ?? ''}
+                          >${item.date}</time
+                        >`
+                      : null}
+                  </span>
+                </a>
+              </li>
+            `
+          )}
+        </ol>
+      </section>
+    `;
+  }
+}
+
+customElements.define('blog-most-popular', BlogMostPopular);

package/src/blog/src/atoms/blog-newsletter-signup.js

@@ -0,0 +1,342 @@
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import { minWidth } from '../breakpoints.js';
+
+/**
+ * Newsletter signup card — email capture with heading, description, and privacy disclaimer.
+ *
+ * @property {string} headingBefore - Heading text before the emphasized word
+ * @property {string} headingEmphasis - Italic-emphasized word in the heading
+ * @property {string} headingAfter - Heading text after the emphasized word
+ * @property {string} description - Supporting copy below the heading
+ * @property {string} disclaimerBefore - Disclaimer text before the privacy policy link
+ * @property {string} privacyHref - URL for the privacy policy link
+ * @property {string} privacyLabel - Link text for the privacy policy
+ * @property {string} disclaimerAfter - Disclaimer text after the privacy policy link
+ * @property {string} buttonLabel - Subscribe button label
+ * @property {string} placeholder - Email input placeholder
+ */
+export class BlogNewsletterSignup extends BlogElement {
+  static properties = {
+    headingBefore   : { type: String, attribute: 'heading-before' },
+    headingEmphasis : { type: String, attribute: 'heading-emphasis' },
+    headingAfter    : { type: String, attribute: 'heading-after' },
+    description     : { type: String },
+    disclaimerBefore: { type: String, attribute: 'disclaimer-before' },
+    privacyHref     : { type: String, attribute: 'privacy-href' },
+    privacyLabel    : { type: String, attribute: 'privacy-label' },
+    disclaimerAfter : { type: String, attribute: 'disclaimer-after' },
+    buttonLabel     : { type: String, attribute: 'button-label' },
+    placeholder     : { type: String },
+    _error          : { type: String, state: true },
+    _submitted      : { type: Boolean, state: true }
+  };
+
+  constructor() {
+    super();
+    this.headingBefore = 'The one cybersecurity newsletter you ';
+    this.headingEmphasis = 'actually';
+    this.headingAfter = ' need';
+    this.description =
+      'Relevant tips, real-world scams explained, and actionable advice...all in one place!';
+    this.disclaimerBefore =
+      'I confirm that I am the owner of the provided email address and I agree with ';
+    this.privacyHref = '#';
+    this.privacyLabel = 'Privacy Policy';
+    this.disclaimerAfter = '.';
+    this.buttonLabel = 'Subscribe';
+    this.placeholder = 'Your best email';
+    this._error = '';
+    this._submitted = false;
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .newsletter {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        box-sizing: border-box;
+        text-align: center;
+        padding: var(--blog-newsletter-padding);
+        border: var(--blog-newsletter-border-width) solid
+          var(--blog-newsletter-border-color);
+        border-radius: var(--blog-newsletter-borderRadius);
+        background: var(--blog-newsletter-background);
+        gap: var(--blog-newsletter-gap);
+      }
+
+      .newsletter__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--blog-newsletter-icon-size);
+        height: var(--blog-newsletter-icon-size);
+        color: var(--blog-newsletter-icon-color);
+      }
+
+      .newsletter__icon svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .newsletter__heading {
+        margin: 0;
+        max-width: var(--blog-newsletter-heading-max-width);
+        font-family: var(--blog-newsletter-heading-fontFamily);
+        font-size: var(--blog-newsletter-heading-fontSize);
+        font-weight: var(--blog-newsletter-heading-fontWeight);
+        line-height: var(--blog-newsletter-heading-lineHeight);
+        color: var(--blog-newsletter-heading-color);
+      }
+
+      .newsletter__emphasis {
+        font-style: var(--blog-newsletter-heading-emphasis-fontStyle);
+      }
+
+      .newsletter__description {
+        margin: 0;
+        max-width: var(--blog-newsletter-description-max-width);
+        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-newsletter-description-color);
+      }
+
+      .newsletter__form {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        max-width: var(--blog-newsletter-form-max-width);
+        gap: var(--blog-newsletter-form-gap);
+      }
+
+      ${unsafeCSS(minWidth('sm'))} {
+        .newsletter__form {
+          flex-direction: row;
+          align-items: stretch;
+        }
+      }
+
+      .newsletter__input {
+        flex: 1;
+        min-width: 0;
+        // height: var(--form-input-medium-height);
+        // padding: var(--form-input-medium-padding);
+        border: var(--form-input-default-borderWidth) solid
+          var(--form-input-default-borderColor);
+        border-radius: var(--form-input-medium-borderRadius);
+        background: var(--form-input-default-backgroundColor);
+        font-family: var(--form-input-default-fontFamily);
+        font-size: var(--form-input-medium-fontSize);
+        line-height: var(--form-input-default-lineHeight);
+        color: var(--form-input-default-color);
+        padding-left: var(--spacing-16)
+
+      }
+
+      .newsletter__input::placeholder {
+        color: var(--color-text-muted);
+      }
+
+      .newsletter__input:focus {
+        outline: none;
+        border-color: var(--form-input-focus-borderColor);
+        box-shadow: var(--form-input-focus-boxShadow);
+      }
+
+      :host([invalid]) .newsletter__input {
+        border-color: var(--form-input-error-borderColor);
+        background: var(--form-input-error-backgroundColor);
+      }
+
+      .newsletter__button {
+        flex-shrink: 0;
+        height: var(--button-size-medium-height);
+        padding: var(--button-size-medium-padding-vertical)
+          var(--button-size-medium-padding-horizontal);
+        border: var(--button-shared-borderWidth) solid
+          var(--button-primary-border-default);
+        border-radius: var(--button-size-medium-borderRadius);
+        background: var(--button-primary-background-default);
+        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);
+        color: var(--button-primary-text-default);
+        cursor: pointer;
+        transition: background-color var(--button-shared-transition-duration)
+          var(--button-shared-transition-easing);
+      }
+
+      .newsletter__button:hover {
+        background: var(--button-primary-background-hover);
+        border-color: var(--button-primary-border-hover);
+      }
+
+      .newsletter__button:focus-visible {
+        outline: var(--button-shared-focus-outline);
+        outline-offset: var(--button-shared-focus-outlineOffset);
+      }
+
+      .newsletter__error {
+        margin: 0;
+        width: 100%;
+        max-width: var(--blog-newsletter-form-max-width);
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--form-help-text-default-fontSize);
+        color: var(--form-help-text-error-color);
+        text-align: left;
+      }
+
+      .newsletter__disclaimer {
+        margin: 0;
+        max-width: var(--blog-newsletter-disclaimer-max-width);
+        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);
+      }
+
+      .newsletter__disclaimer a {
+        color: var(--color-text-link);
+        text-decoration: var(
+          --typography-link-default-textDecoration-default
+        );
+      }
+
+      .newsletter__disclaimer a:hover {
+        color: var(--color-text-link-hover);
+        text-decoration: var(
+          --typography-link-default-textDecoration-hover
+        );
+      }
+
+      .newsletter__disclaimer a:focus-visible {
+        outline: var(--focus-outline-traditional);
+        outline-offset: var(--focus-outline-offset);
+      }
+    `
+  ];
+
+  updated(changed) {
+    if (changed.has('_error')) {
+      if (this._error) {
+        this.setAttribute('invalid', '');
+      } else {
+        this.removeAttribute('invalid');
+      }
+    }
+  }
+
+  /** @param {SubmitEvent} event */
+  _handleSubmit(event) {
+    event.preventDefault();
+    this._submitted = false;
+
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement)) {
+      return;
+    }
+
+    const data = new FormData(form);
+    const email = String(data.get('email') ?? '').trim();
+
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      this._error = 'Please enter a valid email address.';
+      return;
+    }
+
+    this._error = '';
+    this._submitted = true;
+    form.reset();
+  }
+
+  _renderEnvelopeIcon() {
+    return html`
+      <svg
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <rect
+          x="4"
+          y="10"
+          width="40"
+          height="28"
+          rx="4"
+          stroke="currentColor"
+          stroke-width="2"
+        />
+        <path
+          d="M4 14L24 28L44 14"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    `;
+  }
+
+  render() {
+    return html`
+      <section class="newsletter" part="newsletter" aria-label="Newsletter signup">
+        <div class="newsletter__icon" part="icon">${this._renderEnvelopeIcon()}</div>
+
+        <h2 class="newsletter__heading" part="heading">
+          ${this.headingBefore}
+          <em class="newsletter__emphasis" part="emphasis">${this.headingEmphasis}</em>
+          ${this.headingAfter}
+        </h2>
+
+        <p class="newsletter__description" part="description">${this.description}</p>
+
+        <form
+          class="newsletter__form"
+          part="form"
+          @submit=${this._handleSubmit}
+          novalidate
+        >
+          <input
+            class="newsletter__input"
+            part="input"
+            type="email"
+            name="email"
+            autocomplete="email"
+            placeholder=${this.placeholder}
+            aria-label=${this.placeholder}
+            aria-invalid=${this._error ? 'true' : 'false'}
+            ?disabled=${this._submitted}
+          />
+          <button class="newsletter__button" part="button" type="submit">
+            ${this.buttonLabel}
+          </button>
+        </form>
+
+        ${this._error
+          ? html`<p class="newsletter__error" part="error" role="alert">
+              ${this._error}
+            </p>`
+          : nothing}
+
+        <p class="newsletter__disclaimer" part="disclaimer">
+          ${this.disclaimerBefore}
+          <a href=${this.privacyHref} part="privacy-link">${this.privacyLabel}</a>${this.disclaimerAfter}
+        </p>
+      </section>
+    `;
+  }
+}
+
+customElements.define('blog-newsletter-signup', BlogNewsletterSignup);

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

@@ -0,0 +1,61 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import { renderInlineContent } from '../content/render-inline-content.js';
+
+/** Body prose paragraph */
+export class BlogParagraph extends BlogElement {
+  static properties = {
+    emphasis: { type: String, reflect: true },
+    content : { type: Array }
+  };
+
+  constructor() {
+    super();
+    this.content = [];
+  }
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      p {
+        margin: 0;
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-prose-fontSize);
+        font-weight: var(--typography-body-regular-fontWeight);
+        line-height: var(--blog-prose-lineHeight);
+        color: var(--blog-prose-color);
+      }
+
+      :host([emphasis='italic']) p {
+        font-style: italic;
+      }
+
+      :host([emphasis='bold']) p {
+        font-weight: var(--typography-fontWeight-bold);
+      }
+
+      :host([emphasis='bold-italic']) p {
+        font-weight: var(--typography-fontWeight-bold);
+        font-style: italic;
+      }
+
+      ::slotted(blog-link),
+      blog-link {
+        display: inline;
+      }
+    `
+  ];
+
+  render() {
+    const hasLinks = this.content.some((segment) => segment.type === 'link');
+
+    return html`<p part="paragraph">
+      ${hasLinks ? renderInlineContent(this.content) : html`<slot></slot>`}
+    </p>`;
+  }
+}
+
+customElements.define('blog-paragraph', BlogParagraph);