@repobit/dex-system-design 0.23.8 → 0.23.9

package/src/components/accordion/accordion.stories.js

@@ -1,339 +1,243 @@
-import { html } from 'lit';
-import './accordion.js';
+import { html } from "lit";
+import "./accordion.js";
 
 export default {
-  title     : 'Components/Accordion',
-  tags      : ['autodocs'],
+  title     : "Components/Accordion",
+  tags      : ["autodocs"],
   parameters: {
-    docs: {
+    layout: "padded",
+    docs  : {
       description: {
         component: `
-**BdAccordionItem** and **BdAccordionSection** are Lit web components for building structured, collapsible FAQ or guide sections.
+Two Lit web components for building accordion sections.
 
-Two elements are available:
-- \`<bd-accordion-item>\` — a single collapsible item with a +/− toggle
-- \`<bd-accordion-section>\` — a section wrapper with optional title and user guide link
-
-### Usage
 \`\`\`html
-<bd-accordion-section
-  title="General Questions"
-  guide-label="View User Guide"
-  guide-href="/guide"
->
-  <bd-accordion-item title="What is included?">
-    <p>All features are included in every plan.</p>
+<bd-accordion-section title="Frequently Asked Questions">
+  <bd-accordion-item title="What is Bitdefender?">
+    <p>Bitdefender is a cybersecurity company...</p>
+  </bd-accordion-item>
+  <bd-accordion-item title="How do I install it?">
+    <p>Download the installer from our website...</p>
   </bd-accordion-item>
 </bd-accordion-section>
 \`\`\`
 
-### Notes
-- \`bd-accordion-item\` uses \`+\` / \`−\` as toggle indicators
-- \`bd-accordion-section\` renders a guide link only when \`guide-label\` is provided
-- \`title\` on \`bd-accordion-section\` is optional — the \`<h2>\` is omitted when absent
+### Attributes
+
+#### \`bd-accordion-section\`
+| Attribute     | Type   | Default     | Description                                                                 |
+|---------------|--------|-------------|-----------------------------------------------------------------------------|
+| \`title\`       | String | —           | Optional section heading rendered as \`<h2>\`                               |
+| \`variant\`     | String | \`default\` | \`default\` · \`default-blue\` · \`small\`                                  |
+| \`guide-icon\`  | String | —           | Path to icon shown next to the user guide link                              |
+| \`guide-label\` | String | —           | Text for the user guide link (renders the link when set)                    |
+| \`guide-href\`  | String | \`#\`       | URL for the user guide link                                                 |
+
+#### \`bd-accordion-item\`
+| Attribute | Type    | Default | Description                          |
+|-----------|---------|---------|--------------------------------------|
+| \`title\`   | String  | —       | Trigger label                        |
+| \`open\`    | Boolean | \`false\`| Whether the panel is expanded        |
         `
       }
     }
-  },
-  argTypes: {
-    // BdAccordionItem
-    itemTitle: {
-      control    : 'text',
-      description: 'Title text displayed in the accordion item header',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' },
-        category    : 'BdAccordionItem'
-      }
-    },
-    open: {
-      control    : 'boolean',
-      description: 'Whether the accordion item is expanded by default',
-      table      : {
-        type        : { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category    : 'BdAccordionItem'
-      }
-    },
-    // BdAccordionSection
-    sectionTitle: {
-      control    : 'text',
-      description: 'Section heading rendered as an `<h2>`',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' },
-        category    : 'BdAccordionSection'
-      }
-    },
-    guideLabel: {
-      control    : 'text',
-      description: 'Label for the user guide link. If empty, the link is not rendered.',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' },
-        category    : 'BdAccordionSection'
-      }
-    },
-    guideHref: {
-      control    : 'text',
-      description: 'URL for the user guide link',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '#' },
-        category    : 'BdAccordionSection'
-      }
-    },
-    guideIcon: {
-      control    : 'text',
-      description: 'Path to the icon image shown next to the guide link',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '/assets/user_guide.png' },
-        category    : 'BdAccordionSection'
-      }
-    }
   }
 };
 
-const defaultItems = [
-  { title: 'What is included in my plan?',   content: 'All core features are included in every Bitdefender plan.' },
-  { title: 'Can I use it on multiple devices?', content: 'Yes, depending on your subscription you can protect up to unlimited devices.' },
-  { title: 'How do I renew my subscription?', content: 'You can renew from your Bitdefender Central account at any time.' },
-  { title: 'Is there a free trial?',         content: 'Yes, a 30-day free trial is available for most products.' }
-];
 
-// ─── BdAccordionItem Stories ────────────────────────────────────────────────
+// ─── Default ─────────────────────────────────────────────────────────────────
 
-export const ItemDefault = {
-  name  : 'Item — Default (Collapsed)',
+export const Default = {
+  name  : "Default",
   render: () => html`
-    <bd-accordion-item title="What is included in my plan?">
-      <p>All core features are included in every Bitdefender plan.</p>
-    </bd-accordion-item>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'A single accordion item in its default collapsed state, showing the `+` toggle.'
-      }
-    }
-  }
+    <bd-accordion-section title="Frequently Asked Questions">
+      <bd-accordion-item title="What is Bitdefender Total Security?">
+        <p>Bitdefender Total Security offers real-time protection against viruses, malware, spyware, ransomware, and other cyber threats across Windows, macOS, iOS, and Android.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="How many devices can I protect?">
+        <p>Depending on your subscription plan, you can protect between 1 and 10 devices simultaneously with a single Bitdefender account.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Does Bitdefender slow down my computer?">
+        <p>Bitdefender is consistently rated as one of the lightest security solutions on system performance in independent AV-TEST benchmarks.</p>
+      </bd-accordion-item>
+    </bd-accordion-section>
+  `
 };
 
-export const ItemOpen = {
-  name  : 'Item — Open',
-  render: () => html`
-    <bd-accordion-item title="What is included in my plan?" open>
-      <p>All core features are included in every Bitdefender plan.</p>
-    </bd-accordion-item>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Accordion item rendered in the open/expanded state using the `open` attribute. Shows the `−` toggle.'
-      }
-    }
-  }
-};
 
-export const ItemRichContent = {
-  name  : 'Item — Rich Slotted Content',
+// ─── One item open by default ─────────────────────────────────────────────────
+
+export const OpenByDefault = {
+  name  : "Item open by default",
   render: () => html`
-    <bd-accordion-item title="What platforms are supported?" open>
-      <ul>
-        <li>Windows 10 / 11</li>
-        <li>macOS 12+</li>
-        <li>Android 8.0+</li>
-        <li>iOS 14+</li>
-      </ul>
-      <p>Visit <a href="#">our compatibility page</a> for full details.</p>
-    </bd-accordion-item>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Item with rich slotted content: a list, a paragraph, and an anchor link.'
-      }
-    }
-  }
+    <bd-accordion-section title="Getting Started">
+      <bd-accordion-item title="How do I install Bitdefender?" open>
+        <p>Download the installer from your Bitdefender account, run it, and follow the on-screen instructions. The process takes under two minutes.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Do I need to uninstall my previous antivirus?">
+        <p>Yes. Running two security solutions simultaneously can cause conflicts. Bitdefender will prompt you to remove any detected antivirus during installation.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="What operating systems are supported?">
+        <p>Bitdefender supports Windows 7 and later, macOS 10.14 and later, Android 5.0 and later, and iOS 12 and later.</p>
+      </bd-accordion-item>
+    </bd-accordion-section>
+  `
 };
 
-// ─── BdAccordionSection Stories ─────────────────────────────────────────────
 
-export const SectionDefault = {
-  name  : 'Section — Default',
+// ─── No section title ─────────────────────────────────────────────────────────
+
+export const NoSectionTitle = {
+  name  : "No section title",
   render: () => html`
-    <bd-accordion-section title="General Questions">
-      ${defaultItems.map(item => html`
-        <bd-accordion-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-item>
-      `)}
+    <bd-accordion-section>
+      <bd-accordion-item title="What payment methods are accepted?">
+        <p>We accept all major credit and debit cards, PayPal, and bank transfers depending on your region.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Can I get a refund?">
+        <p>Yes. Bitdefender offers a 30-day money-back guarantee on all subscription plans.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Is my subscription renewed automatically?">
+        <p>Subscriptions auto-renew by default. You can disable auto-renewal at any time from your Bitdefender account dashboard.</p>
+      </bd-accordion-item>
     </bd-accordion-section>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'A full accordion section with a title and four collapsed items. No guide link.'
-      }
-    }
-  }
+  `
 };
 
-export const SectionWithGuideLink = {
-  name  : 'Section — With Guide Link',
+
+// ─── Variant: default-blue ────────────────────────────────────────────────────
+
+export const VariantDefaultBlue = {
+  name  : "Variant — default-blue",
   render: () => html`
     <bd-accordion-section
-      title="Installation Help"
-      guide-label="View Installation Guide"
-      guide-href="/docs/install"
-      guide-icon="/assets/user_guide.png"
+      title="Product Features"
+      variant="default-blue"
     >
-      ${defaultItems.map(item => html`
-        <bd-accordion-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-item>
-      `)}
+      <bd-accordion-item title="What is VPN and do I need it?">
+        <p>A VPN encrypts your internet traffic and hides your IP address, protecting your privacy on public Wi-Fi networks and preventing tracking.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="What is Bitdefender Photon™?">
+        <p>Photon is Bitdefender's adaptive technology that learns the patterns of your hardware and software to optimize scanning speed and efficiency.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Does it include parental controls?">
+        <p>Yes. Bitdefender Total Security and Family Pack include comprehensive parental controls with content filtering, screen time limits, and location tracking.</p>
+      </bd-accordion-item>
     </bd-accordion-section>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Section with all three guide link props set: `guide-label`, `guide-href`, and `guide-icon`. The link and icon are rendered below the items.'
-      }
-    }
-  }
+  `
 };
 
-export const SectionWithGuideLinkNoIcon = {
-  name  : 'Section — Guide Link Without Icon',
+
+// ─── Variant: small ───────────────────────────────────────────────────────────
+
+export const VariantSmall = {
+  name  : "Variant — small",
   render: () => html`
     <bd-accordion-section
-      title="Billing Questions"
-      guide-label="View Billing Guide"
-      guide-href="/docs/billing"
-      guide-icon=""
+      title="System Requirements"
+      variant="small"
     >
-      ${defaultItems.map(item => html`
-        <bd-accordion-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-item>
-      `)}
+      <bd-accordion-item title="Windows requirements">
+        <p>Windows 7 with Service Pack 1, Windows 8, Windows 8.1, Windows 10, Windows 11. Minimum 2 GB RAM and 2.5 GB free disk space.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="macOS requirements">
+        <p>macOS 10.14 (Mojave) or later. Minimum 1 GB RAM and 1 GB free disk space.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Android requirements">
+        <p>Android 5.0 or later. At least 150 MB free storage space.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="iOS requirements">
+        <p>iOS 12.0 or later. Compatible with iPhone, iPad, and iPod touch.</p>
+      </bd-accordion-item>
     </bd-accordion-section>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: '`guide-icon` is set to an empty string — only the text label is rendered inside the guide link, without an icon image.'
-      }
-    }
-  }
+  `
 };
 
-export const SectionNoTitle = {
-  name  : 'Section — No Title',
-  render: () => html`
-    <bd-accordion-section>
-      ${defaultItems.map(item => html`
-        <bd-accordion-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-item>
-      `)}
-    </bd-accordion-section>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Section without a `title` prop. The `<h2>` is conditionally omitted.'
-      }
-    }
-  }
-};
 
-export const SectionWithOpenItem = {
-  name  : 'Section — First Item Open',
-  render: () => html`
-    <bd-accordion-section title="FAQ">
-      ${defaultItems.map((item, i) => html`
-        <bd-accordion-item title="${item.title}" ?open="${i === 0}">
-          <p>${item.content}</p>
-        </bd-accordion-item>
-      `)}
-    </bd-accordion-section>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'First item is open by default. Remaining items are collapsed.'
-      }
-    }
-  }
-};
+// ─── With user guide link ─────────────────────────────────────────────────────
 
-export const MultipleSections = {
-  name  : 'Multiple Sections',
+export const WithGuideLink = {
+  name  : "With user guide link",
   render: () => html`
-    <bd-accordion-section title="General Questions">
-      <bd-accordion-item title="What is Bitdefender?">
-        <p>Bitdefender is a global cybersecurity company founded in 2001.</p>
+    <bd-accordion-section
+      title="Troubleshooting"
+      guide-label="View the full user guide"
+      guide-href="https://www.bitdefender.com/consumer/support/"
+    >
+      <bd-accordion-item title="Bitdefender won't install — what should I do?">
+        <p>Make sure you have administrator rights, temporarily disable any other security software, and check that your system meets the minimum requirements.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="My subscription is not activating">
+        <p>Verify that you entered the correct activation code and that it has not already been used on the maximum number of devices allowed by your plan.</p>
       </bd-accordion-item>
-      <bd-accordion-item title="Where is Bitdefender based?">
-        <p>Bitdefender is headquartered in Bucharest, Romania.</p>
+      <bd-accordion-item title="Scans are taking very long">
+        <p>Run a Quick Scan first to address active threats. For full system scans, schedule them during low-activity periods such as overnight.</p>
       </bd-accordion-item>
     </bd-accordion-section>
+  `
+};
 
+
+// ─── With user guide link + icon ─────────────────────────────────────────────
+
+export const WithGuideLinkAndIcon = {
+  name  : "With user guide link + icon",
+  render: () => html`
     <bd-accordion-section
-      title="Technical Support"
-      guide-label="View Support Guide"
-      guide-href="/docs/support"
+      title="Troubleshooting"
+      guide-icon="/assets/book.svg"
+      guide-label="View the full user guide"
+      guide-href="https://www.bitdefender.com/consumer/support/"
     >
-      <bd-accordion-item title="How do I contact support?">
-        <p>You can reach support via live chat or email from your Central account.</p>
+      <bd-accordion-item title="Bitdefender won't install — what should I do?">
+        <p>Make sure you have administrator rights, temporarily disable any other security software, and check that your system meets the minimum requirements.</p>
       </bd-accordion-item>
-      <bd-accordion-item title="What are the support hours?">
-        <p>Support is available 24/7 for all premium plans.</p>
+      <bd-accordion-item title="My subscription is not activating">
+        <p>Verify that you entered the correct activation code and that it has not already been used on the maximum number of devices allowed by your plan.</p>
       </bd-accordion-item>
     </bd-accordion-section>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Two separate `bd-accordion-section` components rendered sequentially — one without a guide link, one with.'
-      }
-    }
-  }
+  `
 };
 
-export const Playground = {
-  name: '🛝 Playground',
-  args: {
-    sectionTitle: 'FAQ Section',
-    guideLabel  : 'View User Guide',
-    guideHref   : '/docs/guide',
-    guideIcon   : '/assets/user_guide.png',
-    itemTitle   : 'Can I cancel anytime?',
-    open        : false
-  },
-  render: (args) => html`
-    <bd-accordion-section
-      title="${args.sectionTitle}"
-      guide-label="${args.guideLabel}"
-      guide-href="${args.guideHref}"
-      guide-icon="${args.guideIcon}"
-    >
-      <bd-accordion-item title="${args.itemTitle}" ?open="${args.open}">
-        <p>Yes, you can cancel your subscription at any time from your Bitdefender Central account.</p>
+
+// ─── bd-accordion-item isolated ──────────────────────────────────────────────
+
+export const ItemIsolated = {
+  name  : "bd-accordion-item (isolated)",
+  render: () => html`
+    <div style="max-width: 680px; padding: 1rem;">
+      <bd-accordion-item title="What is two-factor authentication?">
+        <p>Two-factor authentication (2FA) adds an extra layer of security by requiring a second form of verification — such as a code sent to your phone — in addition to your password.</p>
+      </bd-accordion-item>
+    </div>
+  `
+};
+
+
+// ─── Many items ───────────────────────────────────────────────────────────────
+
+export const ManyItems = {
+  name  : "Many items",
+  render: () => html`
+    <bd-accordion-section title="Everything You Need to Know">
+      <bd-accordion-item title="What is ransomware protection?">
+        <p>Ransomware protection detects and blocks attempts to encrypt your files without authorization, keeping your documents, photos, and videos safe.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="What is Safe Online Banking?">
+        <p>Safe Online Banking opens a dedicated, isolated browser for financial transactions, protecting against keyloggers, screen capture malware, and phishing.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Can I use one subscription on multiple platforms?">
+        <p>Yes. Multi-device plans allow you to mix and match Windows, macOS, Android, and iOS devices up to your plan limit.</p>
       </bd-accordion-item>
-      <bd-accordion-item title="Is there a free trial?">
-        <p>Yes, a 30-day free trial is available.</p>
+      <bd-accordion-item title="What is Bitdefender Central?">
+        <p>Bitdefender Central is the web and mobile dashboard where you manage all your protected devices, subscriptions, and security reports from one place.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Is my data sent to Bitdefender servers?">
+        <p>Bitdefender uses cloud-assisted detection to identify new threats quickly. Only suspicious file hashes and metadata are transmitted — never your personal files.</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="What happens when my subscription expires?">
+        <p>Protection stops when your subscription expires. You will receive notifications before expiry so you can renew without a gap in coverage.</p>
       </bd-accordion-item>
     </bd-accordion-section>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Interactive playground. Adjust section title, guide link props, and the first item\'s title and open state via Controls.'
-      }
-    }
-  }
+  `
 };

package/src/components/awards/awards-icon.js

@@ -1,44 +1,56 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from "lit";
 
-export class BdIcon extends LitElement {
+/**
+ * Optional `src` (image URL) with `label` for alt text, or default slot for inline SVG.
+ */
+class BdIcon extends LitElement {
   static properties = {
-    src   : { type: String },
-    label : { type: String },
-    width : { type: String },
+    src: { type: String },
+    label: { type: String },
+    width: { type: String },
     height: { type: String }
   };
 
-  constructor() {
-    super();
-    this.width = '100%';
-    this.height = '100%';
-  }
-
-  render() {
-    const ariaLabel = this.label || null;
-
-    const commonStyles = `
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 0;
+      color: var(--color-blue-500);
+    }
+    .wrap,
+    img {
+      display: block;
+      width: var(--bd-icon-w, auto);
+      height: var(--bd-icon-h, auto);
+    }
+    img {
+      object-fit: contain;
+    }
+    ::slotted(svg) {
       display: block;
       width: 100%;
       height: 100%;
-    `;
+    }
+  `;
 
-    return html`
-      ${this.src
-          ? html`<img 
-            src="${this.src}" 
-            alt="${ariaLabel}"
-            aria-label="${ariaLabel}"
-            width="${this.width}" 
-            height="${this.height}"
-            style="${commonStyles} object-fit: contain;"
-          >`
-          : html`<div style="${commonStyles}">
-            <slot></slot>
-          </div>`
-      }
-    `;
+  render() {
+    const w = this.width || "";
+    const h = this.height || "";
+    const style = `${w ? `--bd-icon-w:${w};` : ""}${h ? `--bd-icon-h:${h};` : ""}`;
+    if (this.src) {
+      return html`
+        <img
+          src="${this.src}"
+          alt="${this.label || ""}"
+          style="${style}"
+          loading="lazy"
+          decoding="async"
+        />
+      `;
+    }
+    return html`<span class="wrap" style="${style}"><slot></slot></span>`;
   }
 }
 
-customElements.define('bd-icon', BdIcon);
+customElements.define("bd-icon", BdIcon);