@repobit/dex-system-design 0.23.7 → 0.23.9

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

@@ -1,332 +1,203 @@
-import { html } from 'lit';
-import './accordion-bg.js';
+import { html } from "lit";
+import "./accordion-bg.js";
 
 export default {
-  title     : 'Components/AccordionBg',
-  tags      : ['autodocs'],
+  title     : "Components/AccordionBg",
+  tags      : ["autodocs"],
   parameters: {
-    docs: {
+    layout: "padded",
+    docs  : {
       description: {
         component: `
-**BdAccordionBg** is a Lit web component that renders a styled accordion container with a title and slotted accordion items.
+Two Lit web components for building FAQ-style accordion sections with an optional card background.
 
-It consists of two elements:
-- \`<bd-accordion-bg>\` — the wrapper/container with an optional title and background
-- \`<bd-accordion-bg-item>\` — individual collapsible items with toggle behavior
-
-### Usage
 \`\`\`html
-<bd-accordion-bg title="FAQ Section">
+<bd-accordion-bg title="Frequently Asked Questions">
   <bd-accordion-bg-item title="What is Bitdefender?">
-    <p>Bitdefender is a cybersecurity company...</p>
+    <p>Bitdefender is a global cybersecurity leader...</p>
   </bd-accordion-bg-item>
-  <bd-accordion-bg-item title="How does it work?">
-    <p>It uses AI-powered threat detection...</p>
+  <bd-accordion-bg-item title="How do I renew my subscription?">
+    <p>Log in to Bitdefender Central and go to My Subscriptions...</p>
   </bd-accordion-bg-item>
 </bd-accordion-bg>
 \`\`\`
 
-### Accessibility
-- Each item has \`role="button"\`, \`aria-expanded\`, and \`aria-controls\`
-- Keyboard navigation supported via \`Enter\` and \`Space\`
-- IDs are auto-generated for \`aria-controls\` / \`aria-labelledby\` pairing
+### Attributes
+
+#### \`bd-accordion-bg\`
+| Attribute | Type    | Default | Description                                               |
+|-----------|---------|---------|-----------------------------------------------------------|
+| \`title\`   | String  | —       | Heading rendered inside the container header              |
+| \`no-bg\`   | Boolean | \`false\`| Removes the card background from the container            |
+
+#### \`bd-accordion-bg-item\`
+| Attribute | Type    | Default  | Description                                              |
+|-----------|---------|----------|----------------------------------------------------------|
+| \`title\`   | String  | —        | Question / trigger label                                 |
+| \`open\`    | Boolean | \`false\` | Whether the answer panel is expanded                    |
+| \`no-bg\`   | Boolean | \`false\` | Removes the card background from this individual item   |
         `
       }
     }
-  },
-  argTypes: {
-    title: {
-      control    : 'text',
-      description: 'Title displayed in the accordion container header',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' },
-        category    : 'BdAccordionBg'
-      }
-    },
-    noBg: {
-      control    : 'boolean',
-      description: 'When true, removes the background styling from the container',
-      table      : {
-        type        : { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category    : 'BdAccordionBg'
-      }
-    },
-    itemTitle: {
-      control    : 'text',
-      description: 'Title for an individual accordion item',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' },
-        category    : 'BdAccordionBgItem'
-      }
-    },
-    itemOpen: {
-      control    : 'boolean',
-      description: 'Controls whether an accordion item is open by default',
-      table      : {
-        type        : { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category    : 'BdAccordionBgItem'
-      }
-    },
-    itemNoBg: {
-      control    : 'boolean',
-      description: 'Removes background from individual accordion items',
-      table      : {
-        type        : { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category    : 'BdAccordionBgItem'
-      }
-    }
   }
 };
 
-const defaultItems = [
-  { title: 'What is Bitdefender?',       content: 'Bitdefender is a global cybersecurity leader offering award-winning protection.' },
-  { title: 'How does it protect me?',    content: 'It uses AI-powered behavioral detection and real-time threat intelligence.' },
-  { title: 'Is it available on mobile?', content: 'Yes, Bitdefender is available on Android and iOS devices.' },
-  { title: 'What is the refund policy?', content: 'Bitdefender offers a 30-day money-back guarantee on all plans.' }
-];
 
-// ─── Stories ───────────────────────────────────────────────────────────────
+// ─── Default ─────────────────────────────────────────────────────────────────
 
 export const Default = {
-  name  : 'Default',
+  name  : "Default",
   render: () => html`
     <bd-accordion-bg title="Frequently Asked Questions">
-      ${defaultItems.map(item => html`
-        <bd-accordion-bg-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
+      <bd-accordion-bg-item title="What is Bitdefender Total Security?">
+        <p>Bitdefender Total Security offers award-winning protection against viruses, malware, ransomware, and zero-day exploits across all your devices.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="How many devices does my plan cover?">
+        <p>Depending on your subscription, you can protect between 1 and 10 devices. Multi-device plans cover any combination of Windows, macOS, Android, and iOS.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Does Bitdefender affect system performance?">
+        <p>Bitdefender is consistently rated best-in-class for performance impact by independent labs such as AV-TEST and AV-Comparatives.</p>
+      </bd-accordion-bg-item>
     </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default accordion with a title and four items, all collapsed by default.'
-      }
-    }
-  }
+  `
 };
 
-export const WithFirstItemOpen = {
-  name  : 'First Item Open',
-  render: () => html`
-    <bd-accordion-bg title="Frequently Asked Questions">
-      ${defaultItems.map((item, i) => html`
-        <bd-accordion-bg-item title="${item.title}" ?open="${i === 0}">
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
-    </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The first accordion item is open by default using the `open` boolean attribute.'
-      }
-    }
-  }
-};
 
-export const AllItemsOpen = {
-  name  : 'All Items Open',
+// ─── One item open by default ─────────────────────────────────────────────────
+
+export const OpenByDefault = {
+  name  : "Item open by default",
   render: () => html`
-    <bd-accordion-bg title="All Expanded">
-      ${defaultItems.map(item => html`
-        <bd-accordion-bg-item title="${item.title}" open>
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
+    <bd-accordion-bg title="Getting Started">
+      <bd-accordion-bg-item title="How do I install Bitdefender?" open>
+        <p>Download the installer from your Bitdefender Central account, run it, and follow the on-screen steps. Installation typically completes in under two minutes.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Do I need to remove my old antivirus first?">
+        <p>Yes. Bitdefender will detect any existing security software and guide you through removing it before completing the installation.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Where do I enter my activation code?">
+        <p>Log in to Bitdefender Central at central.bitdefender.com, click My Subscriptions, then Add code and enter your activation key.</p>
+      </bd-accordion-bg-item>
     </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'All accordion items rendered with `open` attribute set, showing all content simultaneously.'
-      }
-    }
-  }
+  `
 };
 
+
+// ─── No background on container ───────────────────────────────────────────────
+
 export const NoBgContainer = {
-  name  : 'No Background (Container)',
+  name  : "No background — container",
   render: () => html`
-    <bd-accordion-bg title="No Background Container" no-bg>
-      ${defaultItems.map(item => html`
-        <bd-accordion-bg-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
+    <bd-accordion-bg title="Frequently Asked Questions" no-bg>
+      <bd-accordion-bg-item title="What payment methods are accepted?">
+        <p>We accept Visa, Mastercard, American Express, PayPal, and bank transfers. Available methods may vary by country.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Can I get a refund?">
+        <p>Bitdefender offers a 30-day money-back guarantee on all new subscriptions. Renewals are not eligible for refunds after the grace period.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Is auto-renewal enabled by default?">
+        <p>Yes. You can disable auto-renewal at any time from the My Subscriptions section of Bitdefender Central.</p>
+      </bd-accordion-bg-item>
     </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The `no-bg` attribute is applied to the container, removing its background styling.'
-      }
-    }
-  }
+  `
 };
 
+
+// ─── No background on items ───────────────────────────────────────────────────
+
 export const NoBgItems = {
-  name  : 'No Background (Items)',
+  name  : "No background — items",
   render: () => html`
-    <bd-accordion-bg title="No Background Items">
-      ${defaultItems.map(item => html`
-        <bd-accordion-bg-item title="${item.title}" no-bg>
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
+    <bd-accordion-bg title="Product Features">
+      <bd-accordion-bg-item title="What is Bitdefender VPN?" no-bg>
+        <p>Bitdefender VPN encrypts your internet connection and masks your IP address, giving you privacy on public Wi-Fi and preventing online tracking.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="What is Anti-Tracker?" no-bg>
+        <p>Anti-Tracker blocks advertising trackers, analytics scripts, and social media pixels that follow you across the web without your consent.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="What is Bitdefender Photon™?" no-bg>
+        <p>Photon is Bitdefender's adaptive scanning technology that learns your hardware and software configuration to optimize performance over time.</p>
+      </bd-accordion-bg-item>
     </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The `no-bg` attribute is applied to each individual item, removing their background styling.'
-      }
-    }
-  }
+  `
 };
 
-export const NoBgAll = {
-  name  : 'No Background (All)',
+
+// ─── No background on both ────────────────────────────────────────────────────
+
+export const NoBgBoth = {
+  name  : "No background — container + items",
   render: () => html`
-    <bd-accordion-bg title="No Background Everywhere" no-bg>
-      ${defaultItems.map(item => html`
-        <bd-accordion-bg-item title="${item.title}" no-bg>
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
+    <bd-accordion-bg title="Compatibility" no-bg>
+      <bd-accordion-bg-item title="Is Bitdefender compatible with Windows 11?" no-bg>
+        <p>Yes. Bitdefender fully supports Windows 11, including features such as Secure Boot and TPM 2.0.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Does it work on Apple Silicon Macs?" no-bg>
+        <p>Yes. Bitdefender for Mac runs natively on Apple Silicon (M1, M2, M3) as well as Intel-based Macs.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Can I use it on Chromebooks?" no-bg>
+        <p>Bitdefender for Android can be installed via Google Play on Chromebooks that support Android apps.</p>
+      </bd-accordion-bg-item>
     </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: '`no-bg` applied to both the container and all items — fully transparent layout.'
-      }
-    }
-  }
+  `
 };
 
+
+// ─── No container title ───────────────────────────────────────────────────────
+
 export const NoTitle = {
-  name  : 'No Container Title',
+  name  : "No container title",
   render: () => html`
     <bd-accordion-bg>
-      ${defaultItems.map(item => html`
-        <bd-accordion-bg-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
+      <bd-accordion-bg-item title="What is Safe Online Banking?">
+        <p>Safe Online Banking launches a dedicated hardened browser for financial transactions, protecting against screen capture, keyloggers, and browser-based attacks.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="What is ransomware remediation?">
+        <p>If ransomware encrypts any files before Bitdefender can block it, the Ransomware Remediation feature automatically restores those files from secured backups.</p>
+      </bd-accordion-bg-item>
     </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Container rendered without the `title` prop. The header area is empty.'
-      }
-    }
-  }
+  `
 };
 
-export const SingleItem = {
-  name  : 'Single Item',
+
+// ─── bd-accordion-bg-item isolated ───────────────────────────────────────────
+
+export const ItemIsolated = {
+  name  : "bd-accordion-bg-item (isolated)",
   render: () => html`
-    <bd-accordion-bg title="Single Item">
-      <bd-accordion-bg-item title="What is Bitdefender?">
-        <p>Bitdefender is a global cybersecurity leader offering award-winning protection.</p>
+    <div style="max-width: 680px; padding: 1rem;">
+      <bd-accordion-bg-item title="What is two-factor authentication?">
+        <p>Two-factor authentication adds a second verification step — such as a one-time code sent to your phone — when logging into your Bitdefender account.</p>
       </bd-accordion-bg-item>
-    </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Edge case: only one accordion item inside the container.'
-      }
-    }
-  }
+    </div>
+  `
 };
 
-export const RichContent = {
-  name  : 'Rich Slotted Content',
+
+// ─── Many items ───────────────────────────────────────────────────────────────
+
+export const ManyItems = {
+  name  : "Many items",
   render: () => html`
-    <bd-accordion-bg title="Rich Content Example">
-      <bd-accordion-bg-item title="What plans are available?" open>
-        <ul>
-          <li>Antivirus Plus — 1 device</li>
-          <li>Total Security — up to 5 devices</li>
-          <li>Premium Security — unlimited devices</li>
-        </ul>
+    <bd-accordion-bg title="Everything You Need to Know">
+      <bd-accordion-bg-item title="What is real-time protection?">
+        <p>Real-time protection continuously monitors all file activity on your device and blocks threats the moment they are detected, before they can cause damage.</p>
       </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Supported platforms?">
-        <p>Windows, macOS, iOS, and Android are all supported.</p>
-        <a href="#">Learn more</a>
+      <bd-accordion-bg-item title="What is web protection?">
+        <p>Web protection scans URLs in real time and blocks access to phishing sites, malicious downloads, and fraudulent pages before they load in your browser.</p>
       </bd-accordion-bg-item>
-    </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Accordion items with rich slotted content including lists, paragraphs, and links.'
-      }
-    }
-  }
-};
-
-export const KeyboardNavigation = {
-  name  : 'Keyboard Navigation',
-  render: () => html`
-    <p style="margin-bottom: 12px; font-size: 14px;">
-      Tab to focus an item, then press <strong>Enter</strong> or <strong>Space</strong> to toggle.
-    </p>
-    <bd-accordion-bg title="Keyboard Accessible Accordion">
-      ${defaultItems.map(item => html`
-        <bd-accordion-bg-item title="${item.title}">
-          <p>${item.content}</p>
-        </bd-accordion-bg-item>
-      `)}
-    </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demonstrates keyboard accessibility. Each item has `tabindex="0"` and responds to `Enter` and `Space` key events.'
-      }
-    }
-  }
-};
-
-export const Playground = {
-  name: '🛝 Playground',
-  args: {
-    title    : 'Accordion Title',
-    noBg     : false,
-    itemTitle: 'Accordion Item Title',
-    itemOpen : false,
-    itemNoBg : false
-  },
-  render: (args) => html`
-    <bd-accordion-bg title="${args.title}" ?no-bg="${args.noBg}">
-      <bd-accordion-bg-item
-        title="${args.itemTitle}"
-        ?open="${args.itemOpen}"
-        ?no-bg="${args.itemNoBg}"
-      >
-        <p>This is the slotted content inside the accordion item.</p>
+      <bd-accordion-bg-item title="What is vulnerability scanning?">
+        <p>The vulnerability scanner checks your installed applications and Windows for missing patches and outdated software that could be exploited by attackers.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="What is Bitdefender Central?">
+        <p>Bitdefender Central is the unified dashboard for managing all your protected devices, viewing security reports, and controlling your subscription.</p>
       </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Second item (static)">
-        <p>Static content for the second item.</p>
+      <bd-accordion-bg-item title="Can I try Bitdefender for free?">
+        <p>Yes. Bitdefender offers a 30-day free trial for most consumer products. No credit card is required to start the trial.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="What happens after my trial ends?">
+        <p>Once the trial period ends, protection stops unless you purchase a subscription. Your settings and scan history are preserved if you upgrade.</p>
       </bd-accordion-bg-item>
     </bd-accordion-bg>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Interactive playground. Use the Controls panel to modify the container title, no-bg flags, and the first item\'s state.'
-      }
-    }
-  }
+  `
 };