@repobit/dex-system-design 0.21.2 → 0.22.1

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

@@ -1,241 +0,0 @@
-import { html } from 'lit';
-import '../list/list-item/list-item.js'; // Păstrăm bd-li
-import '../list/list.js'; // Importul nou pentru componenta unificată bd-list
-import '../paragraph/paragraph.js';
-import './accordion.js';
-
-export default {
-  title        : 'Components/Accordion Light',
-  component    : 'bd-accordion-section',
-  subcomponents: {
-    'bd-accordion-item'   : 'bd-accordion-item',
-    'bd-accordion-section': 'bd-accordion-section',
-    'bd-li'               : 'bd-li'
-  },
-  argTypes: {
-    title: {
-      control    : 'text',
-      description: 'Title of the accordion section'
-    },
-    guideIcon: {
-      control    : 'text',
-      description: 'URL for the guide icon image'
-    },
-    guideLabel: {
-      control    : 'text',
-      description: 'Text label for the guide link'
-    },
-    guideHref: {
-      control    : 'text',
-      description: 'URL for the guide link'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'A lightweight accordion component ideal for menus, terms of use, FAQs, and other content that requires expandable sections. Features a clean, minimalist design with optional user guide links.'
-      }
-    }
-  }
-};
-
-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-p kind="regular">Our products protect devices, data, and privacy against the full spectrum of cyberthreats.</bd-p>
-    </bd-accordion-item>
-
-    <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-p kind="regular"><strong>Internet:</strong> Required for activation and updates</bd-p>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Installation Process">
-      <bd-p kind="regular">Follow these simple steps to install Bitdefender:</bd-p>
-      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-        <bd-li kind="bullet" size="md">Download the installation file from our website</bd-li>
-        <bd-li kind="bullet" size="md">Run the installer and follow on-screen instructions</bd-li>
-        <bd-li kind="bullet" size="md">Activate with your product key</bd-li>
-        <bd-li kind="bullet" size="md">Run your first scan</bd-li>
-      </bd-list>
-    </bd-accordion-item>
-  </bd-accordion-section>
-`;
-
-export const Default = BasicTemplate.bind({});
-Default.args = {
-  title     : 'Product Information',
-  guideIcon : '',
-  guideLabel: '',
-  guideHref : '#'
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default lightweight accordion with simple toggle indicators and clean design.'
-    }
-  }
-};
-
-export const WithUserGuide = BasicTemplate.bind({});
-WithUserGuide.args = {
-  title     : 'Installation Guide',
-  guideIcon : '/assets/user_guide.png',
-  guideLabel: 'View Complete User Guide',
-  guideHref : '/user-guide'
-};
-WithUserGuide.parameters = {
-  docs: {
-    description: {
-      story: 'Accordion with user guide link, perfect for documentation and help sections.'
-    }
-  }
-};
-
-export const TermsOfUse = () => html`
-  <bd-accordion-section title="Terms of Use">
-    <bd-accordion-item title="Acceptance of Terms">
-      <bd-p kind="regular">By accessing and using Bitdefender products, you accept and agree to be bound by the terms and provision of this agreement.</bd-p>
-      <bd-p kind="regular"><strong>Last Updated:</strong> January 15, 2024</bd-p>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="License Grant">
-      <bd-p kind="regular">Bitdefender grants you a limited, non-exclusive, non-transferable license to use the software for personal or internal business purposes.</bd-p>
-      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-        <bd-li kind="bullet" size="md">Single-user license for personal use</bd-li>
-        <bd-li kind="bullet" size="md">Multi-device options available</bd-li>
-        <bd-li kind="bullet" size="md">Non-commercial use unless specified</bd-li>
-      </bd-list>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Privacy Policy">
-      <bd-p kind="regular">Our privacy policy explains how we collect, use, and protect your personal information.</bd-p>
-      <bd-p kind="regular"><strong>Data Collection:</strong> We collect minimal data necessary for security functionality.</bd-p>
-      <bd-p kind="regular"><strong>Data Usage:</strong> Data is used solely for threat detection and product improvement.</bd-p>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Limitation of Liability">
-      <bd-p kind="regular">To the maximum extent permitted by law, Bitdefender shall not be liable for any indirect, special, incidental, or consequential damages.</bd-p>
-      <bd-p kind="regular">This includes but is not limited to damages for loss of profits, business interruption, or loss of information.</bd-p>
-    </bd-accordion-item>
-  </bd-accordion-section>
-`;
-TermsOfUse.parameters = {
-  docs: {
-    description: {
-      story: 'Perfect for legal documents like Terms of Use with multiple expandable sections.'
-    }
-  }
-};
-
-export const NavigationMenu = () => html`
-  <bd-accordion-section>
-    <bd-accordion-item title="Products">
-      <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-        <bd-li kind="none" size="md">
-          <a href="/antivirus" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Antivirus Plus</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/internet-security" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Internet Security</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/total-security" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Total Security</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/premium-security" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Premium Security</a>
-        </bd-li>
-      </bd-list>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Support">
-      <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-        <bd-li kind="none" size="md">
-          <a href="/downloads" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Downloads</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/knowledge-base" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Knowledge Base</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/contact" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Contact Support</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/community" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Community Forum</a>
-        </bd-li>
-      </bd-list>
-    </bd-accordion-item>
-
-    <bd-accordion-item title="Company">
-      <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
-        <bd-li kind="none" size="md">
-          <a href="/about" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">About Us</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/press" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Press Center</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/careers" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Careers</a>
-        </bd-li>
-        <bd-li kind="none" size="md">
-          <a href="/partners" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Partners</a>
-        </bd-li>
-      </bd-list>
-    </bd-accordion-item>
-  </bd-accordion-section>
-`;
-NavigationMenu.parameters = {
-  docs: {
-    description: {
-      story: 'Used as a navigation menu with expandable categories and internal links.'
-    }
-  }
-};
-
-export const MultipleSections = () => html`
-  <div style="display: flex; flex-direction: column; gap: 40px;">
-    <bd-accordion-section title="Getting Started">
-      <bd-accordion-item title="System Requirements">
-        <bd-p kind="regular">Minimum requirements for optimal performance...</bd-p>
-      </bd-accordion-item>
-      <bd-accordion-item title="Installation Guide">
-        <bd-p kind="regular">Step-by-step installation instructions...</bd-p>
-      </bd-accordion-item>
-    </bd-accordion-section>
-
-    <bd-accordion-section 
-      title="Troubleshooting"
-      guide-icon="/assets/user_guide.png"
-      guide-label="Advanced Troubleshooting Guide"
-      guide-href="/troubleshooting"
-    >
-      <bd-accordion-item title="Common Installation Issues">
-        <bd-p kind="regular">Solutions for frequent installation problems...</bd-p>
-      </bd-accordion-item>
-      <bd-accordion-item title="Performance Optimization">
-        <bd-p kind="regular">Tips to improve system performance...</bd-p>
-      </bd-accordion-item>
-    </bd-accordion-section>
-
-    <bd-accordion-section title="Advanced Features">
-      <bd-accordion-item title="VPN Configuration">
-        <bd-p kind="regular">How to set up and use the included VPN...</bd-p>
-      </bd-accordion-item>
-      <bd-accordion-item title="Parental Controls">
-        <bd-p kind="regular">Setting up and managing parental controls...</bd-p>
-      </bd-accordion-item>
-    </bd-accordion-section>
-  </div>
-`;
-MultipleSections.parameters = {
-  docs: {
-    description: {
-      story: 'Multiple accordion sections grouped together, perfect for comprehensive documentation.'
-    }
-  }
-};