@repobit/dex-system-design 0.23.95 → 0.23.96

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

@@ -0,0 +1,519 @@
+import { html } from 'lit';
+import './blog-abstract.js';
+import './blog-authors.js';
+import './blog-avatar.js';
+import './blog-blockquote.js';
+import './blog-caption.js';
+import './blog-code-block.js';
+import './blog-dek.js';
+import './blog-featured-image.js';
+import './blog-heading.js';
+import './blog-image.js';
+import './blog-key-takeaways.js';
+import './blog-link.js';
+import './blog-meta.js';
+import './blog-most-popular.js';
+import './blog-newsletter-signup.js';
+import './blog-paragraph.js';
+import './blog-product-upsell.js';
+import './blog-related-articles.js';
+import './blog-related-label.js';
+import './blog-report-promo.js';
+
+export default {
+  title     : 'Blog/Atoms',
+  tags      : ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs  : {
+      description: {
+        component: 'Atomic blog components — building blocks for blog articles and pages.'
+      }
+    }
+  }
+};
+
+// ─── blog-heading ─────────────────────────────────────────────────────────────
+
+export const Heading = {
+  name  : 'blog-heading',
+  render: () => html`
+    <div style="display:flex;flex-direction:column;gap:16px;">
+      <blog-heading level="2">Section heading level 2</blog-heading>
+      <blog-heading level="3">Section heading level 3</blog-heading>
+      <blog-heading level="4">Section heading level 4</blog-heading>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-heading` — section headings h2–h4. Use `level` attribute to control the heading tag.' }
+    }
+  }
+};
+
+// ─── blog-paragraph ───────────────────────────────────────────────────────────
+
+export const Paragraph = {
+  name  : 'blog-paragraph',
+  render: () => html`
+    <div style="display:flex;flex-direction:column;gap:16px;max-width:680px;">
+      <blog-paragraph>
+        This is a regular prose paragraph. Bitdefender helps block phishing, malicious links, and identity threats across your devices.
+      </blog-paragraph>
+      <blog-paragraph emphasis="italic">
+        This paragraph is rendered in italic emphasis.
+      </blog-paragraph>
+      <blog-paragraph emphasis="bold">
+        This paragraph is rendered in bold emphasis.
+      </blog-paragraph>
+      <blog-paragraph emphasis="bold-italic">
+        This paragraph is rendered in bold-italic emphasis.
+      </blog-paragraph>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-paragraph` — body prose. Supports `emphasis`: `italic`, `bold`, `bold-italic`.' }
+    }
+  }
+};
+
+// ─── blog-abstract ────────────────────────────────────────────────────────────
+
+export const Abstract = {
+  name  : 'blog-abstract',
+  render: () => html`
+    <blog-abstract
+      .paragraphs=${[
+        'Cybercriminals are getting smarter, faster, and more targeted — and the old rules no longer apply.',
+        'In this article, we break down the top threats of 2026 and what you can do to stay protected.'
+      ]}
+    ></blog-abstract>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-abstract` — intro paragraphs below the hero title, with a left accent border.' }
+    }
+  }
+};
+
+// ─── blog-dek ─────────────────────────────────────────────────────────────────
+
+export const Dek = {
+  name  : 'blog-dek',
+  render: () => html`
+    <blog-dek>
+      A concise, italic lead sentence that sets the tone before the full article begins.
+    </blog-dek>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-dek` — article lead / dek paragraph. Italic, body-lead size.' }
+    }
+  }
+};
+
+// ─── blog-avatar ──────────────────────────────────────────────────────────────
+
+export const Avatar = {
+  name  : 'blog-avatar',
+  render: () => html`
+    <div style="display:flex;gap:12px;align-items:center;">
+      <blog-avatar initials="AB"></blog-avatar>
+      <blog-avatar initials="JD"></blog-avatar>
+      <blog-avatar initials="MR"></blog-avatar>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-avatar` — circular initials avatar for author bylines.' }
+    }
+  }
+};
+
+// ─── blog-authors ─────────────────────────────────────────────────────────────
+
+export const Authors = {
+  name  : 'blog-authors',
+  render: () => html`
+    <div style="display:flex;flex-direction:column;gap:24px;">
+      <blog-authors
+        label="Authors"
+        .authors=${[
+          { name: 'Alex Balan', href: '#alex' },
+          { name: 'Maria Ionescu', href: '#maria' }
+        ]}
+      ></blog-authors>
+      <blog-authors
+        label="Written by"
+        .authors=${[{ name: 'John Doe', href: '#john' }]}
+      ></blog-authors>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-authors` — hero authors block with label and brand pill chips. Pass `authors` as array of `{ name, href? }`.' }
+    }
+  }
+};
+
+// ─── blog-meta ────────────────────────────────────────────────────────────────
+
+export const Meta = {
+  name  : 'blog-meta',
+  render: () => html`
+    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
+      <blog-meta type="author" value="Alex Balan"></blog-meta>
+      <blog-meta type="separator"></blog-meta>
+      <blog-meta type="date" value="June 12, 2026" datetime="2026-06-12"></blog-meta>
+      <blog-meta type="separator"></blog-meta>
+      <blog-meta type="reading-time" value="5 min read"></blog-meta>
+      <blog-meta type="separator"></blog-meta>
+      <blog-meta type="updated" value="July 1, 2026" datetime="2026-07-01"></blog-meta>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-meta` — inline meta atoms: `author`, `date`, `reading-time`, `updated`, `separator`.' }
+    }
+  }
+};
+
+// ─── blog-link ────────────────────────────────────────────────────────────────
+
+export const Link = {
+  name  : 'blog-link',
+  render: () => html`
+    <div style="display:flex;flex-direction:column;gap:12px;">
+      <blog-link href="#">Standalone link — full size</blog-link>
+      <p style="font-size:16px;">
+        Read more about
+        <blog-link href="#" inline>inline links inside prose</blog-link>
+        which inherit the parent font styles.
+      </p>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-link` — standalone or inline text link. Use `inline` attribute for in-prose links.' }
+    }
+  }
+};
+
+// ─── blog-caption ─────────────────────────────────────────────────────────────
+
+export const Caption = {
+  name  : 'blog-caption',
+  render: () => html`
+    <blog-caption>
+      Figure 1. A threat actor targeting enterprise endpoints via spear phishing.
+    </blog-caption>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-caption` — image or figure caption. Renders as `<figcaption>`, centered, muted.' }
+    }
+  }
+};
+
+// ─── blog-featured-image ──────────────────────────────────────────────────────
+
+export const FeaturedImage = {
+  name  : 'blog-featured-image',
+  render: () => html`
+    <div style="display:flex;flex-direction:column;gap:24px;max-width:800px;">
+      <blog-featured-image
+        src="/assets/tabs-img1.png"
+        alt="Article featured image"
+      ></blog-featured-image>
+      <blog-featured-image alt="Placeholder — no src"></blog-featured-image>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-featured-image` — 16:9 article hero cover. Shows a placeholder when `src` is missing.' }
+    }
+  }
+};
+
+// ─── blog-image ───────────────────────────────────────────────────────────────
+
+export const Image = {
+  name  : 'blog-image',
+  render: () => html`
+    <blog-image
+      src="/assets/tabs-img2.png"
+      alt="Inline article screenshot"
+    ></blog-image>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-image` — inline body image. Natural dimensions, full-width, rounded corners.' }
+    }
+  }
+};
+
+// ─── blog-blockquote ──────────────────────────────────────────────────────────
+
+export const Blockquote = {
+  name  : 'blog-blockquote',
+  render: () => html`
+    <div style="display:flex;flex-direction:column;gap:24px;max-width:680px;">
+      <blog-blockquote>
+        Cybersecurity is not a product, but a process. It requires constant vigilance and adaptation.
+      </blog-blockquote>
+      <blog-blockquote cite="Bruce Schneier">
+        Security without clear threat intelligence is theater.
+      </blog-blockquote>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-blockquote` — soft blue panel with oversized opening mark. Optional `cite` renders an attribution footer.' }
+    }
+  }
+};
+
+// ─── blog-code-block ──────────────────────────────────────────────────────────
+
+export const CodeBlock = {
+  name  : 'blog-code-block',
+  render: () => html`
+    <div style="display:flex;flex-direction:column;gap:24px;max-width:680px;">
+      <blog-code-block
+        language="javascript"
+        code=${'const greeting = "Hello, World!";\nconsole.log(greeting);\n\nfunction add(a, b) {\n  return a + b;\n}'}
+        caption="Example: basic JavaScript function"
+      ></blog-code-block>
+      <blog-code-block
+        language="bash"
+        code=${'npm install @bitdefender/sdk\nnpx bd-scan --target ./src'}
+      ></blog-code-block>
+      <blog-code-block
+        language="json"
+        code=${'{\n  "name": "my-app",\n  "version": "1.0.0",\n  "dependencies": {\n    "lit": "^3.0.0"\n  }\n}'}
+      ></blog-code-block>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-code-block` — PrismJS syntax highlighted code block. Supports `language`, `code`, and optional `caption`.' }
+    }
+  }
+};
+
+// ─── blog-key-takeaways ───────────────────────────────────────────────────────
+
+export const KeyTakeaways = {
+  name  : 'blog-key-takeaways',
+  render: () => html`
+    <blog-key-takeaways
+      title="Key Takeaways"
+      .items=${[
+        'Always use unique, strong passwords for every account.',
+        'Enable two-factor authentication wherever possible.',
+        'Keep your software and OS updated at all times.',
+        'Be cautious of unsolicited emails and suspicious links.',
+        'Use a reputable antivirus and VPN solution.'
+      ]}
+    ></blog-key-takeaways>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-key-takeaways` — bordered summary card with title and bullet list. Pass `items` as string array.' }
+    }
+  }
+};
+
+// ─── blog-related-label ───────────────────────────────────────────────────────
+
+export const RelatedLabel = {
+  name  : 'blog-related-label',
+  render: () => html`
+    <blog-related-label>Read also:</blog-related-label>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-related-label` — italic section label before related article links.' }
+    }
+  }
+};
+
+// ─── blog-most-popular ────────────────────────────────────────────────────────
+
+export const MostPopular = {
+  name  : 'blog-most-popular',
+  render: () => html`
+    <div style="max-width:320px;">
+      <blog-most-popular
+        title="Most popular"
+        .items=${[
+          {
+            title   : 'How to Spot a Phishing Email in 2026',
+            href    : '#',
+            date    : 'MAR 2026',
+            datetime: '2026-03-01',
+            image   : '/assets/tabs-img1.png',
+            imageAlt: 'Phishing email article'
+          },
+          {
+            title   : 'The Best VPNs for Privacy-Conscious Users',
+            href    : '#',
+            date    : 'APR 2026',
+            datetime: '2026-04-01',
+            image   : '/assets/tabs-img2.png',
+            imageAlt: 'VPN article'
+          },
+          {
+            title   : 'Ransomware: What You Need to Know',
+            href    : '#',
+            date    : 'MAY 2026',
+            datetime: '2026-05-01',
+            image   : '/assets/tabs-img3.png',
+            imageAlt: 'Ransomware article'
+          }
+        ]}
+      ></blog-most-popular>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-most-popular` — sidebar widget with thumbnail, title, and date. Items: `{ title, href, date?, datetime?, image?, imageAlt? }`.' }
+    }
+  }
+};
+
+// ─── blog-newsletter-signup ───────────────────────────────────────────────────
+
+export const NewsletterSignup = {
+  name  : 'blog-newsletter-signup',
+  render: () => html`
+    <div style="max-width:600px;">
+      <blog-newsletter-signup
+        heading-before="The one cybersecurity newsletter you "
+        heading-emphasis="actually"
+        heading-after=" need"
+        description="Relevant tips, real-world scams explained, and actionable advice...all in one place!"
+        button-label="Subscribe"
+        placeholder="Your best email"
+        disclaimer-before="I confirm that I am the owner of the provided email address and I agree with "
+        privacy-href="#"
+        privacy-label="Privacy Policy"
+        disclaimer-after="."
+      ></blog-newsletter-signup>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-newsletter-signup` — email capture card with heading, description, input, and privacy disclaimer. Form validates email client-side.' }
+    }
+  }
+};
+
+// ─── blog-product-upsell ──────────────────────────────────────────────────────
+
+export const ProductUpsell = {
+  name  : 'blog-product-upsell',
+  render: () => html`
+    <div style="max-width:800px;">
+      <blog-product-upsell
+        headline="Want stronger protection against scams and online fraud?"
+        description="Bitdefender helps block phishing, malicious links, and identity threats across your devices. Try it free for 30 days."
+        cta-label="Get Bitdefender Total Security"
+        cta-href="#"
+        social-proof="★ 4.8 · Trusted by millions worldwide"
+      ></blog-product-upsell>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-product-upsell` — in-article product CTA card. Stacks vertically on mobile, horizontal on desktop.' }
+    }
+  }
+};
+
+// ─── blog-related-articles ────────────────────────────────────────────────────
+
+export const RelatedArticles = {
+  name  : 'blog-related-articles',
+  render: () => html`
+    <blog-related-articles
+      title="Related articles"
+      see-all-label="See all related articles"
+      .items=${[
+        {
+          title      : 'How to Spot a Phishing Email in 2026',
+          href       : '#',
+          excerpt    : 'Phishing attacks are evolving. Here is what to look for in modern email threats.',
+          principle  : 'Privacy',
+          date       : 'Mar 2026',
+          datetime   : '2026-03-01',
+          readingTime: '4 min read',
+          image      : '/assets/tabs-img1.png',
+          imageAlt   : 'Phishing article thumbnail'
+        },
+        {
+          title      : 'The Best VPNs for Privacy-Conscious Users',
+          href       : '#',
+          excerpt    : 'We tested 20 VPN services. Here are the ones worth your money.',
+          principle  : 'Protection',
+          date       : 'Apr 2026',
+          datetime   : '2026-04-01',
+          readingTime: '6 min read',
+          image      : '/assets/tabs-img2.png',
+          imageAlt   : 'VPN article thumbnail'
+        },
+        {
+          title      : 'Ransomware: What You Need to Know',
+          href       : '#',
+          excerpt    : 'Ransomware attacks are on the rise. Learn how to protect your files.',
+          principle  : 'Protection',
+          date       : 'May 2026',
+          datetime   : '2026-05-01',
+          readingTime: '5 min read',
+          image      : '/assets/tabs-img3.png',
+          imageAlt   : 'Ransomware article thumbnail'
+        },
+        {
+          title      : 'Identity Theft: How to Protect Yourself Online',
+          href       : '#',
+          excerpt    : 'Identity theft is one of the fastest-growing crimes. Here is how to stay safe.',
+          principle  : 'Identity',
+          date       : 'Jun 2026',
+          datetime   : '2026-06-01',
+          readingTime: '7 min read',
+          image      : '/assets/tabs-img1.png',
+          imageAlt   : 'Identity theft article thumbnail'
+        }
+      ]}
+    ></blog-related-articles>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-related-articles` — post-article card grid. Up to 4 items, with responsive layout and expandable "See all" on mobile.' }
+    }
+  }
+};
+
+// ─── blog-report-promo ────────────────────────────────────────────────────────
+
+export const ReportPromo = {
+  name  : 'blog-report-promo',
+  render: () => html`
+    <div style="max-width:800px;">
+      <blog-report-promo
+        title="The Global Scam Intelligence Report 2026"
+        description="We block billions of scams every year. Here is what we learned from the front-lines battle with a 1-trillion dollar business model."
+        cta-label="Download report"
+        cta-href="#"
+        image-src="/assets/tabs-img1.png"
+        image-alt="Report cover preview"
+      ></blog-report-promo>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: { story: '`blog-report-promo` — inline report download card with cover image, title, description, and CTA. Horizontal layout on desktop.' }
+    }
+  }
+};

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

@@ -0,0 +1,70 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import './blog-tag.js';
+
+/**
+ * Hero authors block — label + brand pill chips for one or more authors.
+ *
+ * @property {Array<{ name: string, href?: string }>} authors
+ */
+export class BlogAuthors extends BlogElement {
+  static properties = {
+    authors: { type: Array },
+    label  : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.authors = [];
+    this.label = 'Authors';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .authors__label {
+        margin: 0 0 var(--blog-authors-gap);
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-authors-label-fontSize);
+        font-weight: var(--blog-authors-label-fontWeight);
+        line-height: var(--typography-lineHeight-normal);
+        color: var(--blog-authors-label-color);
+      }
+
+      .authors__list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--blog-authors-pill-gap);
+      }
+    `
+  ];
+
+  render() {
+    if (!this.authors.length) {
+      return null;
+    }
+
+    return html`
+      <div class="authors" part="authors">
+        <p class="authors__label" part="label">${this.label}</p>
+        <div class="authors__list" part="list">
+          ${this.authors.map(
+            (author) => html`
+              <blog-tag
+                label=${author.name}
+                href=${author.href ?? ''}
+                variant="brand"
+              ></blog-tag>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('blog-authors', BlogAuthors);

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

@@ -0,0 +1,44 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/** @attr {string} initials — Author initials (e.g. "AB") */
+export class BlogAvatar extends BlogElement {
+  static properties = {
+    initials: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.initials = '';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+
+      .avatar {
+        width: var(--blog-byline-avatar-size);
+        height: var(--blog-byline-avatar-size);
+        border-radius: var(--radius-full);
+        background: var(--color-blue-50);
+        color: var(--color-blue-700);
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-byline-fontSize);
+        font-weight: var(--typography-fontWeight-semibold);
+        line-height: var(--typography-lineHeight-none);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `
+  ];
+
+  render() {
+    return html`<span class="avatar" part="avatar">${this.initials}</span>`;
+  }
+}
+
+customElements.define('blog-avatar', BlogAvatar);