@repobit/dex-system-design 0.22.11 → 0.23.1

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

@@ -1,345 +1,339 @@
 import { html } from 'lit';
-import '../paragraph/paragraph.js';
 import './accordion.js';
 
 export default {
-  title        : 'Components/Accordion Simple',
-  component    : 'bd-accordion-section',
-  tags         : ['autodocs'],
-  subcomponents: {
-    'bd-accordion-item'   : 'bd-accordion-item',
-    'bd-accordion-section': 'bd-accordion-section'
+  title     : 'Components/Accordion',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdAccordionItem** and **BdAccordionSection** are Lit web components for building structured, collapsible FAQ or guide 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-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
+        `
+      }
+    }
   },
   argTypes: {
-    title: {
+    // BdAccordionItem
+    itemTitle: {
       control    : 'text',
-      description: 'Title of the accordion section',
+      description: 'Title text displayed in the accordion item header',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: '' }
+        defaultValue: { summary: '' },
+        category    : 'BdAccordionItem'
       }
     },
-    guideIcon: {
+    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: 'URL for the guide icon image',
+      description: 'Section heading rendered as an `<h2>`',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: '' }
+        defaultValue: { summary: '' },
+        category    : 'BdAccordionSection'
       }
     },
     guideLabel: {
       control    : 'text',
-      description: 'Text label for the guide link',
+      description: 'Label for the user guide link. If empty, the link is not rendered.',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: '' }
+        defaultValue: { summary: '' },
+        category    : 'BdAccordionSection'
       }
     },
     guideHref: {
       control    : 'text',
-      description: 'URL for the guide link',
+      description: 'URL for the user guide link',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: '#' }
+        defaultValue: { summary: '#' },
+        category    : 'BdAccordionSection'
       }
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'A simple, lightweight accordion component with minimal styling. Perfect for basic expandable content sections without complex styling requirements.'
+    },
+    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 BasicTemplate = ({ title, guideIcon, guideLabel, guideHref }) => html`
-  <bd-accordion-section 
-    title="${title}"
-    guide-icon="${guideIcon}"
-    guide-label="${guideLabel}"
-    guide-href="${guideHref}"
-  >
-    <bd-accordion-item title="What is Bitdefender?">
-      <bd-p kind="regular">Bitdefender is a leading cybersecurity company delivering robust security solutions to over 500 million users in more than 150 countries.</bd-p>
-    </bd-accordion-item>
+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.' }
+];
 
-    <bd-accordion-item title="System Requirements">
-      <bd-p kind="regular"><strong>Operating Systems:</strong> Windows 10/11, macOS 10.12+, Android 5.0+, iOS 12+</bd-p>
-      <bd-p kind="regular"><strong>Hardware:</strong> 1GB RAM minimum, 2.5GB free disk space</bd-p>
-    </bd-accordion-item>
+// ─── BdAccordionItem Stories ────────────────────────────────────────────────
 
-    <bd-accordion-item title="Installation Process">
-      <bd-p kind="regular">Download the installation file, run the installer, and follow on-screen instructions to activate with your product key.</bd-p>
+export const ItemDefault = {
+  name  : 'Item — Default (Collapsed)',
+  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>
-  </bd-accordion-section>
-`;
-
-// ============ STORIES ============
-
-export const Default = BasicTemplate.bind({});
-Default.args = {
-  title     : 'Product Information',
-  guideIcon : '',
-  guideLabel: '',
-  guideHref : '#'
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default simple accordion with clean, minimal design using basic toggle indicators (+/-).'
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A single accordion item in its default collapsed state, showing the `+` toggle.'
+      }
     }
   }
 };
 
-export const WithUserGuide = BasicTemplate.bind({});
-WithUserGuide.args = {
-  title     : 'Installation Guide',
-  guideIcon : '/assets/guide-icon.svg',
-  guideLabel: 'View Complete User Guide',
-  guideHref : '/user-guide'
-};
-WithUserGuide.parameters = {
-  docs: {
-    description: {
-      story: 'Simple accordion with optional user guide link for additional documentation and help resources.'
+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 WithoutTitle = () => html`
-  <bd-accordion-section>
-    <bd-accordion-item title="Frequently Asked Questions">
-      <bd-p kind="regular">Find answers to common questions about our products and services.</bd-p>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Technical Support">
-      <bd-p kind="regular">Contact our support team for technical assistance and troubleshooting.</bd-p>
+export const ItemRichContent = {
+  name  : 'Item — Rich Slotted Content',
+  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>
-
-    <bd-accordion-item title="Product Updates">
-      <bd-p kind="regular">Stay informed about the latest features and security updates.</bd-p>
-    </bd-accordion-item>
-  </bd-accordion-section>
-`;
-WithoutTitle.parameters = {
-  docs: {
-    description: {
-      story: 'Simple accordion without a section title, useful for standalone expandable content areas.'
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Item with rich slotted content: a list, a paragraph, and an anchor link.'
+      }
     }
   }
 };
 
-export const SingleAccordionItem = () => html`
-  <bd-accordion-section title="Security Information">
-    <bd-accordion-item title="How does real-time protection work?" open>
-      <bd-p kind="regular">
-        Bitdefender's real-time protection continuously monitors your system for suspicious activity 
-        and potential threats. It uses advanced behavioral analysis and machine learning to detect 
-        and block malware, ransomware, and other cyber threats before they can cause harm.
-      </bd-p>
-      <bd-p kind="regular">
-        The protection runs in the background with minimal impact on system performance, ensuring 
-        your device remains secure without slowing down your work or entertainment.
-      </bd-p>
-    </bd-accordion-item>
-  </bd-accordion-section>
-`;
-SingleAccordionItem.parameters = {
-  docs: {
-    description: {
-      story: 'Single accordion item in open state, perfect for highlighting important information that should be immediately visible.'
+// ─── BdAccordionSection Stories ─────────────────────────────────────────────
+
+export const SectionDefault = {
+  name  : 'Section — Default',
+  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>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A full accordion section with a title and four collapsed items. No guide link.'
+      }
     }
   }
 };
 
-export const MultipleSections = () => html`
-  <div style="display: flex; flex-direction: column; gap: 2rem;">
-    <bd-accordion-section title="Getting Started">
-      <bd-accordion-item title="System Requirements">
-        <bd-p kind="regular">Check if your device meets the minimum requirements for optimal performance.</bd-p>
-      </bd-accordion-item>
-      <bd-accordion-item title="Installation Steps">
-        <bd-p kind="regular">Follow our simple installation guide to get started quickly.</bd-p>
-      </bd-accordion-item>
+export const SectionWithGuideLink = {
+  name  : 'Section — With Guide Link',
+  render: () => html`
+    <bd-accordion-section
+      title="Installation Help"
+      guide-label="View Installation Guide"
+      guide-href="/docs/install"
+      guide-icon="/assets/user_guide.png"
+    >
+      ${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 with all three guide link props set: `guide-label`, `guide-href`, and `guide-icon`. The link and icon are rendered below the items.'
+      }
+    }
+  }
+};
 
-    <bd-accordion-section 
-      title="Advanced Features"
-      guide-label="Explore All Features"
-      guide-href="/features"
+export const SectionWithGuideLinkNoIcon = {
+  name  : 'Section — Guide Link Without Icon',
+  render: () => html`
+    <bd-accordion-section
+      title="Billing Questions"
+      guide-label="View Billing Guide"
+      guide-href="/docs/billing"
+      guide-icon=""
     >
-      <bd-accordion-item title="VPN Configuration">
-        <bd-p kind="regular">Set up and customize your VPN for secure browsing.</bd-p>
-      </bd-accordion-item>
-      <bd-accordion-item title="Parental Controls">
-        <bd-p kind="regular">Manage and monitor your family's online safety.</bd-p>
-      </bd-accordion-item>
+      ${defaultItems.map(item => html`
+        <bd-accordion-item title="${item.title}">
+          <p>${item.content}</p>
+        </bd-accordion-item>
+      `)}
     </bd-accordion-section>
-  </div>
-`;
-MultipleSections.parameters = {
-  docs: {
-    description: {
-      story: 'Multiple accordion sections grouped together, demonstrating how to organize related content into different categories.'
+  `,
+  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 TechnicalSpecifications = () => html`
-  <bd-accordion-section title="Technical Specifications">
-    <bd-accordion-item title="Compatibility">
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-        <div>
-          <bd-p kind="regular"><strong>Windows</strong></bd-p>
-          <bd-p kind="small">10/11 (64-bit)</bd-p>
-        </div>
-        <div>
-          <bd-p kind="regular"><strong>macOS</strong></bd-p>
-          <bd-p kind="small">10.14+</bd-p>
-        </div>
-        <div>
-          <bd-p kind="regular"><strong>Android</strong></bd-p>
-          <bd-p kind="small">6.0+</bd-p>
-        </div>
-        <div>
-          <bd-p kind="regular"><strong>iOS</strong></bd-p>
-          <bd-p kind="small">13.0+</bd-p>
-        </div>
-      </div>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Performance Impact">
-      <bd-p kind="regular">Bitdefender is designed for minimal system impact:</bd-p>
-      <div style="display: flex; gap: 1rem; margin-top: 1rem;">
-        <div style="text-align: center;">
-          <bd-p kind="large" style="color: #059669; margin: 0;">&lt;2%</bd-p>
-          <bd-p kind="small" style="color: #64748b;">CPU Usage</bd-p>
-        </div>
-        <div style="text-align: center;">
-          <bd-p kind="large" style="color: #3b82f6; margin: 0;">~150MB</bd-p>
-          <bd-p kind="small" style="color: #64748b;">Memory</bd-p>
-        </div>
-        <div style="text-align: center;">
-          <bd-p kind="large" style="color: #8b5cf6; margin: 0;">+0.3s</bd-p>
-          <bd-p kind="small" style="color: #64748b;">Boot Time</bd-p>
-        </div>
-      </div>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Security Features">
-      <bd-p kind="regular">Comprehensive protection includes:</bd-p>
-      <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-        • Real-time antivirus • Advanced threat defense • Behavioral analysis • Firewall protection • 
-        Web protection • Anti-phishing • Ransomware remediation • Vulnerability assessment
-      </bd-p>
-    </bd-accordion-item>
-  </bd-accordion-section>
-`;
-TechnicalSpecifications.parameters = {
-  docs: {
-    description: {
-      story: 'Technical specifications presented in a simple accordion format with grid layouts and performance metrics.'
+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 FAQExample = () => html`
-  <bd-accordion-section 
-    title="Frequently Asked Questions"
-    guide-label="Visit Help Center"
-    guide-href="/help"
-  >
-    <bd-accordion-item title="How do I activate my product?">
-      <bd-p kind="regular">
-        After installation, open Bitdefender and click on the activation button. Enter your 
-        product key or sign in to your Bitdefender account to activate your subscription.
-      </bd-p>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Can I use Bitdefender on multiple devices?">
-      <bd-p kind="regular">
-        Yes, depending on your subscription plan. Most plans allow protection for multiple 
-        devices simultaneously. Check your specific plan details for the exact number of 
-        devices covered.
-      </bd-p>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="How often are virus definitions updated?">
-      <bd-p kind="regular">
-        Bitdefender updates its virus definitions multiple times per day to ensure protection 
-        against the latest threats. Updates are automatic and require an internet connection.
-      </bd-p>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="What should I do if I find a virus?">
-      <bd-p kind="regular">
-        Bitdefender will automatically detect and quarantine most threats. If you suspect an 
-        infection, run a full system scan and follow the recommended actions provided by the software.
-      </bd-p>
-    </bd-accordion-item>
-  </bd-accordion-section>
-`;
-FAQExample.parameters = {
-  docs: {
-    description: {
-      story: 'Classic FAQ implementation using the simple accordion component with clear, concise answers to common questions.'
+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.'
+      }
     }
   }
 };
 
-export const AccessibilityDemo = () => html`
-  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
-    <bd-p kind="regular" style="margin-bottom: 2rem;">
-      The simple accordion includes built-in accessibility features:
-    </bd-p>
-
-    <bd-accordion-section title="Accessibility Features">
-      <bd-accordion-item title="Keyboard Navigation">
-        <bd-p kind="regular">
-          Use <strong>Tab</strong> to navigate between accordion items and <strong>Enter/Space</strong> 
-          to toggle them open and closed.
-        </bd-p>
+export const MultipleSections = {
+  name  : 'Multiple Sections',
+  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-item>
-
-      <bd-accordion-item title="Screen Reader Support">
-        <bd-p kind="regular">
-          Proper ARIA attributes ensure screen readers can announce the accordion state and 
-          structure correctly.
-        </bd-p>
+      <bd-accordion-item title="Where is Bitdefender based?">
+        <p>Bitdefender is headquartered in Bucharest, Romania.</p>
       </bd-accordion-item>
+    </bd-accordion-section>
 
-      <bd-accordion-item title="Focus Management">
-        <bd-p kind="regular">
-          Clear focus indicators make it easy to track your position when navigating with a keyboard.
-        </bd-p>
+    <bd-accordion-section
+      title="Technical Support"
+      guide-label="View Support Guide"
+      guide-href="/docs/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>
+      <bd-accordion-item title="What are the support hours?">
+        <p>Support is available 24/7 for all premium plans.</p>
       </bd-accordion-item>
     </bd-accordion-section>
-
-    <bd-p kind="small" style="color: #64748b; margin-top: 2rem;">
-      Try using keyboard navigation to interact with the accordion above.
-    </bd-p>
-  </div>
-`;
-AccessibilityDemo.parameters = {
-  docs: {
-    description: {
-      story: 'Accessibility demonstration showing keyboard navigation and screen reader support in the simple accordion component.'
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Two separate `bd-accordion-section` components rendered sequentially — one without a guide link, one with.'
+      }
     }
   }
 };
 
-export const InteractivePlayground = BasicTemplate.bind({});
-InteractivePlayground.args = {
-  title     : 'Customize This Accordion',
-  guideIcon : '',
-  guideLabel: '',
-  guideHref : '#'
-};
-InteractivePlayground.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive playground to test the simple accordion component with different configurations and properties.'
+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>
+      <bd-accordion-item title="Is there a free trial?">
+        <p>Yes, a 30-day free trial is available.</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.'
+      }
     }
   }
 };