@repobit/dex-system-design 0.23.31 → 0.23.33

package/src/components/light-carousel/light-carousel.stories.js

@@ -1,85 +1,532 @@
-import { html } from "lit";
-import "./light-carousel-simple.js";
-import "./light-carousel.js";
-
-import "../badge/badge.js";
+import { html } from 'lit';
+import '../badge/badge.js';
+import './light-carousel-simple.js';
+import './light-carousel.js';
 
 export default {
-  title   : "Components/Light Carousel",
-  tags    : ["autodocs"],
+  title     : 'Components/LightCarousel',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Two light carousel variants are available:
+
+- \`<bd-light-carousel-section>\` — carousel with icon, title, optional badge, and slotted \`<bd-p>\` content
+- \`<bd-light-carousel-simple-section>\` — simplified carousel with icon, title, and slotted content, no badge support
+
+Both use corresponding item components:
+- \`<bd-light-carousel-item>\` — for the standard variant
+- \`<bd-light-carousel-simple-item>\` — for the simple variant
+
+### Usage
+\`\`\`html
+<bd-light-carousel-section title="Need help? We've got answers!">
+  <bd-light-carousel-item
+    title="How does Bitdefender protect me?"
+    icon="/assets/icon.png"
+    badge="FAQ"
+  >
+    <bd-p kind="small">Protection details here.</bd-p>
+  </bd-light-carousel-item>
+</bd-light-carousel-section>
+\`\`\`
+
+### Standard vs Simple
+| Feature | bd-light-carousel-section | bd-light-carousel-simple-section |
+|---|---|---|
+| Badge support | Yes | No |
+| Icon | Yes | Yes |
+| Title | Yes | Yes |
+| Slotted content | Yes | Yes |
+
+### Notes
+- Both carousels are static layout — no scroll arrows, no drag behavior
+- Items are displayed in a horizontal flex track
+- \`badge\` on \`bd-light-carousel-item\` renders a \`<bd-badge>\` next to the title
+        `
+      }
+    }
+  },
   argTypes: {
-    title: { control: "text" }
+    title: {
+      control    : 'text',
+      description: 'Section title rendered as `<h1>` above the carousel track',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' },
+        category    : 'Content'
+      }
+    },
+    itemTitle: {
+      control    : 'text',
+      description: 'Title for an individual carousel item',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' },
+        category    : 'Item'
+      }
+    },
+    badge: {
+      control    : 'text',
+      description: '(Standard only) Badge text rendered as `<bd-badge>` next to the item title',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' },
+        category    : 'Item'
+      }
+    },
+    icon: {
+      control    : 'text',
+      description: 'Path to the icon image shown at the top of the item card',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' },
+        category    : 'Item'
+      }
+    }
+  }
+};
+
+// ─── Standard Carousel Stories ─────────────────────────────────────────────
+
+export const Default = {
+  name: 'Standard — Default',
+  args: {
+    title: "Need help? We've got answers!"
+  },
+  render: (args) => html`
+    <bd-light-carousel-section title="${args.title}">
+      <bd-light-carousel-item
+        title="How does Bitdefender Internet Security protect me?"
+        icon="/assets/light-carousel-img1.png"
+        badge="FAQ"
+      >
+        <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
+        <bd-p kind="small">Advanced AI and behavior-based detection ensure safety online and offline.</bd-p>
+      </bd-light-carousel-item>
+
+      <bd-light-carousel-item
+        title="How to install Bitdefender on another device?"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">You can install Bitdefender on other devices by logging into your Central account and using the 'My Devices' tab.</bd-p>
+      </bd-light-carousel-item>
+
+      <bd-light-carousel-item
+        title="Can I transfer my license to a new computer?"
+        icon="/assets/light-carousel-img1.png"
+        badge="How To"
+      >
+        <bd-p kind="small">Yes, just remove the license from the old device via Central and activate it on the new one.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Standard light carousel with three FAQ/How-To items. Two items have `badge` set, one does not.'
+      }
+    }
+  }
+};
+
+export const StandardNoTitle = {
+  name  : 'Standard — No Title',
+  render: () => html`
+    <bd-light-carousel-section>
+      <bd-light-carousel-item
+        title="How does Bitdefender protect me?"
+        icon="/assets/light-carousel-img1.png"
+        badge="FAQ"
+      >
+        <bd-p kind="small">Bitdefender uses AI-powered threat detection to keep you safe.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item
+        title="Can I use one license on multiple devices?"
+        icon="/assets/light-carousel-img1.png"
+        badge="Licensing"
+      >
+        <bd-p kind="small">Yes, depending on your plan you can protect multiple devices.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Standard carousel without a section `title` — the `<h1>` header is conditionally omitted.'
+      }
+    }
   }
 };
 
-const Template = (args) => html`
-  <bd-light-carousel-section title="${args.title}">
-    <bd-light-carousel-item
-      title="How does Bitdefender Internet Security protect me?"
-      icon="/assets/light-carousel-img1.png"
-      badge="FAQ"
-    >
-      <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
-      <bd-p kind="small">Advanced AI and behavior-based detection ensure safety online and offline.</bd-p>
-    </bd-light-carousel-item>
-
-    <bd-light-carousel-item
-      title="How to install Bitdefender on another device?"
-      icon="/assets/light-carousel-img1.png"
-    >
-      <bd-p kind="small">You can install Bitdefender on other devices by logging into your Central account and using the 'My Devices' tab.</bd-p>
-    </bd-light-carousel-item>
-
-    <bd-light-carousel-item
-      title="Can I transfer my license to a new computer?"
-      icon="/assets/light-carousel-img1.png"
-      badge="How To"
-    >
-      <bd-p kind="small">Yes, just remove the license from the old device via Central and activate it on the new one.</bd-p>
-    </bd-light-carousel-item>
-  </bd-light-carousel-section>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  title: "Need help? We've got answers!"
+export const StandardNoBadges = {
+  name  : 'Standard — No Badges',
+  render: () => html`
+    <bd-light-carousel-section title="Frequently Asked Questions">
+      <bd-light-carousel-item
+        title="What is included in my plan?"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">All core features are included in every Bitdefender plan.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item
+        title="How do I renew my subscription?"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">You can renew from your Bitdefender Central account at any time.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item
+        title="Is there a free trial available?"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">Yes, a 30-day free trial is available for most Bitdefender products.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Standard carousel items with no `badge` prop set — only icons and titles are shown in the header.'
+      }
+    }
+  }
 };
 
-const TemplateSimple = (args) => html`
-  <bd-light-carousel-simple-section title="${args.title}">
-    <bd-light-carousel-simple-item
-      title="Scam Copilot Chatbot"
-      icon="/assets/light-carousel-img1.png"
-    >
-      <bd-p kind="small">
-        Specialized AI chatbot that helps you identify suspicious online
-        interactions so you don't become a victim.
-      </bd-p>
-    </bd-light-carousel-simple-item>
-
-    <bd-light-carousel-simple-item
-      title="Scam Wave Alerts"
-      icon="/assets/light-carousel-img1.png"
-    >
-      <bd-p kind="small">
-        Stay informed with real-time alerts about ongoing scam outbreaks
-        detected in your area automatically.
-      </bd-p>
-    </bd-light-carousel-simple-item>
-
-    <bd-light-carousel-simple-item
-      title="Online Scam Protection"
-      icon="/assets/light-carousel-img1.png"
-    >
-      <bd-p kind="small">
-        Focused on browsing activities, it specializes in detecting the newest
-        scam patterns and tactics.
-      </bd-p>
-    </bd-light-carousel-simple-item>
-  </bd-light-carousel-simple-section>
-`;
-
-export const Simple = TemplateSimple.bind({});
-Simple.args = {
-  title: "Our AI-powered platform that detects and fights scams. In real time."
+export const StandardNoIcons = {
+  name  : 'Standard — No Icons',
+  render: () => html`
+    <bd-light-carousel-section title="Help Topics">
+      <bd-light-carousel-item title="Installation Guide" badge="Guide">
+        <bd-p kind="small">Step-by-step installation instructions for all platforms.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item title="Billing & Payments" badge="Account">
+        <bd-p kind="small">Everything you need to know about your subscription billing.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item title="Technical Support" badge="Support">
+        <bd-p kind="small">Contact our support team for technical issues.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Standard items without `icon` prop — the `<img>` is conditionally omitted from each item header.'
+      }
+    }
+  }
+};
+
+export const StandardSingleItem = {
+  name  : 'Standard — Single Item (edge case)',
+  render: () => html`
+    <bd-light-carousel-section title="Quick Answer">
+      <bd-light-carousel-item
+        title="How do I contact support?"
+        icon="/assets/light-carousel-img1.png"
+        badge="Support"
+      >
+        <bd-p kind="small">You can reach our support team 24/7 via live chat or email from your Central account.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge case: only one item in the standard carousel section.'
+      }
+    }
+  }
+};
+
+export const StandardRichContent = {
+  name  : 'Standard — Rich Slotted Content',
+  render: () => html`
+    <bd-light-carousel-section title="Plan Details">
+      <bd-light-carousel-item
+        title="What's included in Total Security?"
+        icon="/assets/light-carousel-img1.png"
+        badge="Features"
+      >
+        <bd-p kind="small">Total Security includes:</bd-p>
+        <ul style="font-size:13px; padding-left:16px; margin:4px 0;">
+          <li>Antivirus & anti-malware</li>
+          <li>Unlimited VPN</li>
+          <li>Password Manager</li>
+          <li>Parental Controls</li>
+        </ul>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item
+        title="Supported platforms"
+        icon="/assets/light-carousel-img1.png"
+        badge="Compatibility"
+      >
+        <bd-p kind="small">Available on Windows, macOS, Android, and iOS.</bd-p>
+        <bd-p kind="small">Visit <a href="#">our compatibility page</a> for full details.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Items with rich slotted content: lists, multiple paragraphs, and anchor links.'
+      }
+    }
+  }
+};
+
+// ─── Simple Carousel Stories ───────────────────────────────────────────────
+
+export const Simple = {
+  name: 'Simple — Default',
+  args: {
+    title: "Our AI-powered platform that detects and fights scams. In real time."
+  },
+  render: (args) => html`
+    <bd-light-carousel-simple-section title="${args.title}">
+      <bd-light-carousel-simple-item
+        title="Scam Copilot Chatbot"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">
+          Specialized AI chatbot that helps you identify suspicious online
+          interactions so you don't become a victim.
+        </bd-p>
+      </bd-light-carousel-simple-item>
+
+      <bd-light-carousel-simple-item
+        title="Scam Wave Alerts"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">
+          Stay informed with real-time alerts about ongoing scam outbreaks
+          detected in your area automatically.
+        </bd-p>
+      </bd-light-carousel-simple-item>
+
+      <bd-light-carousel-simple-item
+        title="Online Scam Protection"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">
+          Focused on browsing activities, it specializes in detecting the newest
+          scam patterns and tactics.
+        </bd-p>
+      </bd-light-carousel-simple-item>
+    </bd-light-carousel-simple-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Simple light carousel with three scam protection feature items. No badge support in this variant.'
+      }
+    }
+  }
+};
+
+export const SimpleNoTitle = {
+  name  : 'Simple — No Title',
+  render: () => html`
+    <bd-light-carousel-simple-section>
+      <bd-light-carousel-simple-item
+        title="Scam Copilot Chatbot"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">AI chatbot that helps you identify suspicious online interactions.</bd-p>
+      </bd-light-carousel-simple-item>
+      <bd-light-carousel-simple-item
+        title="Real-time Alerts"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">Get notified instantly about scam outbreaks in your area.</bd-p>
+      </bd-light-carousel-simple-item>
+    </bd-light-carousel-simple-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Simple carousel without a section title — header omitted.'
+      }
+    }
+  }
+};
+
+export const SimpleNoIcons = {
+  name  : 'Simple — No Icons',
+  render: () => html`
+    <bd-light-carousel-simple-section title="Protection Features">
+      <bd-light-carousel-simple-item title="Scam Detection">
+        <bd-p kind="small">AI-powered scam detection across all browsing activities.</bd-p>
+      </bd-light-carousel-simple-item>
+      <bd-light-carousel-simple-item title="Wave Alerts">
+        <bd-p kind="small">Real-time alerts about scam outbreaks in your area.</bd-p>
+      </bd-light-carousel-simple-item>
+      <bd-light-carousel-simple-item title="Online Protection">
+        <bd-p kind="small">Continuous protection against the latest scam patterns.</bd-p>
+      </bd-light-carousel-simple-item>
+    </bd-light-carousel-simple-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Simple items without `icon` prop — only titles and slotted content are rendered.'
+      }
+    }
+  }
+};
+
+export const SimpleSingleItem = {
+  name  : 'Simple — Single Item (edge case)',
+  render: () => html`
+    <bd-light-carousel-simple-section title="Key Feature">
+      <bd-light-carousel-simple-item
+        title="Scam Copilot Chatbot"
+        icon="/assets/light-carousel-img1.png"
+      >
+        <bd-p kind="small">AI chatbot specialized in identifying suspicious online interactions.</bd-p>
+      </bd-light-carousel-simple-item>
+    </bd-light-carousel-simple-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge case: only one item in the simple carousel.'
+      }
+    }
+  }
+};
+
+// ─── Side-by-Side Comparison ───────────────────────────────────────────────
+
+export const BothVariants = {
+  name  : 'Both Variants Side by Side',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:48px;">
+      <div>
+        <p style="font-weight:600; font-size:14px; margin-bottom:8px; color:#026DFF;">Standard (with badge support)</p>
+        <bd-light-carousel-section title="Help & FAQ">
+          <bd-light-carousel-item title="How do I install?" icon="/assets/light-carousel-img1.png" badge="FAQ">
+            <bd-p kind="small">Download from Central and follow the setup wizard.</bd-p>
+          </bd-light-carousel-item>
+          <bd-light-carousel-item title="How do I renew?" icon="/assets/light-carousel-img1.png" badge="Account">
+            <bd-p kind="small">Renew anytime from your Bitdefender Central account.</bd-p>
+          </bd-light-carousel-item>
+        </bd-light-carousel-section>
+      </div>
+      <div>
+        <p style="font-weight:600; font-size:14px; margin-bottom:8px; color:#026DFF;">Simple (no badge)</p>
+        <bd-light-carousel-simple-section title="AI Features">
+          <bd-light-carousel-simple-item title="Scam Copilot" icon="/assets/light-carousel-img1.png">
+            <bd-p kind="small">AI chatbot that detects suspicious interactions.</bd-p>
+          </bd-light-carousel-simple-item>
+          <bd-light-carousel-simple-item title="Wave Alerts" icon="/assets/light-carousel-img1.png">
+            <bd-p kind="small">Real-time scam outbreak notifications.</bd-p>
+          </bd-light-carousel-simple-item>
+        </bd-light-carousel-simple-section>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Both carousel variants rendered side by side. The standard variant supports badges; the simple variant does not.'
+      }
+    }
+  }
+};
+
+export const MobileView = {
+  name  : 'Mobile View (375px)',
+  render: () => html`
+    <bd-light-carousel-section title="Need help? We've got answers!">
+      <bd-light-carousel-item
+        title="How does Bitdefender protect me?"
+        icon="/assets/light-carousel-img1.png"
+        badge="FAQ"
+      >
+        <bd-p kind="small">AI and behavior-based detection keep you safe online and offline.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item
+        title="How to install on another device?"
+        icon="/assets/light-carousel-img1.png"
+        badge="How To"
+      >
+        <bd-p kind="small">Log into Central and use the My Devices tab to install on more devices.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : {
+      description: {
+        story: 'Standard carousel at 375px. Tests item sizing, icon scaling, and track overflow on mobile.'
+      }
+    }
+  }
+};
+
+export const PlaygroundStandard = {
+  name: '🛝 Playground — Standard',
+  args: {
+    title    : "Need help? We've got answers!",
+    itemTitle: 'How does Bitdefender protect me?',
+    badge    : 'FAQ',
+    icon     : '/assets/light-carousel-img1.png'
+  },
+  render: (args) => html`
+    <bd-light-carousel-section title="${args.title}">
+      <bd-light-carousel-item
+        title="${args.itemTitle}"
+        icon="${args.icon}"
+        badge="${args.badge}"
+      >
+        <bd-p kind="small">Bitdefender uses AI-powered detection to keep you safe online and offline.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item
+        title="How do I renew my subscription?"
+        icon="${args.icon}"
+      >
+        <bd-p kind="small">You can renew from your Bitdefender Central account at any time.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive playground for the standard carousel. Adjust section title, item title, badge, and icon via Controls.'
+      }
+    }
+  }
+};
+
+export const PlaygroundSimple = {
+  name: '🛝 Playground — Simple',
+  args: {
+    title    : 'Our AI-powered platform that detects and fights scams. In real time.',
+    itemTitle: 'Scam Copilot Chatbot',
+    icon     : '/assets/light-carousel-img1.png'
+  },
+  render: (args) => html`
+    <bd-light-carousel-simple-section title="${args.title}">
+      <bd-light-carousel-simple-item
+        title="${args.itemTitle}"
+        icon="${args.icon}"
+      >
+        <bd-p kind="small">Specialized AI chatbot that helps you identify suspicious online interactions.</bd-p>
+      </bd-light-carousel-simple-item>
+      <bd-light-carousel-simple-item
+        title="Scam Wave Alerts"
+        icon="${args.icon}"
+      >
+        <bd-p kind="small">Real-time alerts about ongoing scam outbreaks detected in your area.</bd-p>
+      </bd-light-carousel-simple-item>
+    </bd-light-carousel-simple-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive playground for the simple carousel. Adjust section title, item title, and icon via Controls.'
+      }
+    }
+  }
 };

package/src/components/paragraph/paragraph.css.js

@@ -3,6 +3,7 @@ import { css } from "lit";
 export default css`
   :host {
     display: block;
+    color: var(--color-neutral-1000);
   }
 
   p {

package/src/components/paragraph/paragraph.js

@@ -4,16 +4,48 @@ import paragraphCSS from "./paragraph.css.js";
 
 export class BdP extends LitElement {
   static properties = {
-    kind: { type: String, reflect: true }
+    kind         : { type: String, reflect: true },
+    padding      : { type: String },
+    paddingBottom: { type: String },
+    paddingTop   : { type: String }
+
   };
 
   constructor() {
     super();
     this.kind = "regular";
+    this.padding = "";
+    this.paddingBottom = "";
+    this.paddingTop = "";
+
+  }
+
+  _getKindClass() {
+    switch (this.kind) {
+      case "small":
+        return "bd-paragraph--small";
+      case "regular":
+        return "bd-paragraph--regular";
+      case "large":
+        return "bd-paragraph--large";
+      default:
+        return "bd-paragraph--regular";
+    }
   }
 
   render() {
-    return html`<p><slot></slot></p>`;
+    const styles = [];
+    if (this.padding) styles.push(`padding: ${this.padding};`);
+    if (this.paddingBottom) styles.push(`padding-bottom: ${this.paddingBottom};`);
+    if (this.paddingTop) styles.push(`padding-top: ${this.paddingTop};`);
+
+    const kindClass = this._getKindClass();
+
+    return html`
+      <p class="bd-paragraph ${kindClass}" style="${styles.join(' ')}">
+        <slot></slot>
+      </p>
+    `;
   }
 
   static styles = [tokens, paragraphCSS];