@repobit/dex-system-design 0.21.2 → 0.22.0

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

@@ -0,0 +1,345 @@
+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'
+  },
+  argTypes: {
+    title: {
+      control    : 'text',
+      description: 'Title of the accordion section',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
+    },
+    guideIcon: {
+      control    : 'text',
+      description: 'URL for the guide icon image',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
+    },
+    guideLabel: {
+      control    : 'text',
+      description: 'Text label for the guide link',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
+    },
+    guideHref: {
+      control    : 'text',
+      description: 'URL for the guide link',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '#' }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A simple, lightweight accordion component with minimal styling. Perfect for basic expandable content sections without complex styling requirements.'
+      }
+    }
+  }
+};
+
+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>
+
+    <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>
+
+    <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>
+    </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 (+/-).'
+    }
+  }
+};
+
+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 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>
+    </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.'
+    }
+  }
+};
+
+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.'
+    }
+  }
+};
+
+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>
+    </bd-accordion-section>
+
+    <bd-accordion-section 
+      title="Advanced Features"
+      guide-label="Explore All Features"
+      guide-href="/features"
+    >
+      <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>
+    </bd-accordion-section>
+  </div>
+`;
+MultipleSections.parameters = {
+  docs: {
+    description: {
+      story: 'Multiple accordion sections grouped together, demonstrating how to organize related content into different categories.'
+    }
+  }
+};
+
+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 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 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>
+      </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>
+
+      <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-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.'
+    }
+  }
+};
+
+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.'
+    }
+  }
+};

package/src/components/anchor/anchor.stories.js

@@ -4,130 +4,188 @@ import '../anchor/anchor-nav.js';
 import '../carousel/carousel.js';
 import '../heading/heading.js';
 import '../pricing-cards/pricing-card.js';
-
 import '../tabs/tabs.js';
 
 export default {
-  title     : 'Navigation/Anchor - Navbar',
-  component : 'bd-anchor-nav',
+  title        : 'Navigation/Anchor - Navbar',
+  component    : 'bd-anchor-nav',
+  subcomponents: {
+    'bd-anchor-nav-item': 'bd-anchor-nav-item'
+  },
+  tags: ['autodocs'],
+
+  argTypes: {
+    // Proprietăți pentru bd-anchor-nav
+    position: {
+      control    : { type: 'select' },
+      options    : ['fixed', 'sticky', 'relative'],
+      description: 'Position of the navigation bar',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'fixed' },
+        category    : 'bd-anchor-nav'
+      }
+    },
+    theme: {
+      control    : { type: 'select' },
+      options    : ['light', 'dark'],
+      description: 'Color theme of the navigation bar',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'light' },
+        category    : 'bd-anchor-nav'
+      }
+    },
+    offset: {
+      control    : { type: 'number', min: 0, max: 200, step: 10 },
+      description: 'Offset in pixels from the top when scrolling',
+      table      : {
+        type        : { summary: 'number' },
+        defaultValue: { summary: '0' },
+        category    : 'bd-anchor-nav'
+      }
+    }
+  },
+
   parameters: {
     docs: {
       description: {
         component: `
-**bd-anchor-nav** este o componentă de navigare care oferă linkuri către secțiuni din pagină cu scroll lin.  
-Folosește elemente \`<bd-anchor-nav-item>\` pentru fiecare link, ce trebuie să aibă \`title\` și \`id\`.
+# bd-anchor-nav & bd-anchor-nav-item
 
----
+Navigation component for smooth scrolling to page sections.
 
-### Cum se folosește
+## Usage
 
 \`\`\`html
 <bd-anchor-nav>
-  <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
-  <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
-  <bd-anchor-nav-item title="Anchor 3" id="anchor-3"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Features" id="features"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Pricing" id="pricing"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="FAQ" id="faq"></bd-anchor-nav-item>
 </bd-anchor-nav>
-
-<section id="anchor-1-section">Conținut secțiune 1</section>
-<section id="anchor-2-section">Conținut secțiune 2</section>
-<section id="anchor-3-section">Conținut secțiune 3</section>
 \`\`\`
 
----
-
-### Ce conține demo-ul din acest story
-
-- Navbar cu 3 ancore  
-- Secțiuni cu FAQ, Tabs și Carousel pentru testarea scroll-ului și layout-ului  
-- Secțiune de pricing la final
-
----
-
-### Alte componente utilizate
-
-- \`bd-accordion-bg\`, \`bd-accordion-bg-item\`  
-- \`bd-tabs-component\`  
-- \`bd-carousel-section\`, \`bd-carousel-item\`  
-- \`bd-pricing-container\`
-
----
+## Properties
+
+### bd-anchor-nav
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| \`position\` | 'fixed' \| 'sticky' \| 'relative' | \`fixed\` | CSS position |
+| \`theme\` | 'light' \| 'dark' | \`light\` | Color theme |
+| \`offset\` | number | \`0\` | Scroll offset from top |
+
+### bd-anchor-nav-item
+| Attribute | Type | Required | Description |
+|-----------|------|----------|-------------|
+| \`title\` | string | Yes | Navigation link text |
+| \`id\` | string | Yes | Target section ID |
+
+## Features
+- Smooth scrolling to sections
+- Active state highlighting
+- Responsive design
+- Keyboard navigation support
         `
       }
     }
   }
 };
 
-const Template = () => html`
-  <bd-anchor-nav>
+const Template = (args) => html`
+  <bd-anchor-nav 
+    position="${args.position}" 
+    theme="${args.theme}" 
+    offset="${args.offset}"
+  >
     <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
     <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
     <bd-anchor-nav-item title="Anchor 3" id="anchor-3"></bd-anchor-nav-item>
   </bd-anchor-nav>
 
   <bd-container>
-    <section id="anchor-1-section" style="height: 800px;">
+    <section id="anchor-1" style="height: 800px; padding-top: 80px;">
       <hr />
-      <bd-accordion-bg title="Questions? Answers." id="anchor-1-section">
+      <bd-accordion-bg title="Questions? Answers.">
         <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
-          <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
-          <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
-          <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
-        </bd-accordion-bg-item>
-
-        <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?">
-          <bd-p kind="small">
-            Yes! Bitdefender Internet Security offers unbeatable ransomware
-            protection...
-          </bd-p>
+          <bd-p kind="small">Provides comprehensive protection against online threats.</bd-p>
         </bd-accordion-bg-item>
-
-        <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?">
-          <bd-p kind="small">
-            Bitdefender Internet Security includes a basic VPN with 200MB per day.
-          </bd-p>
+        <bd-accordion-bg-item title="Does Bitdefender protect against ransomware?">
+          <bd-p kind="small">Yes, with multi-layered defense mechanisms.</bd-p>
         </bd-accordion-bg-item>
-      </bd-faq-section>
+      </bd-accordion-bg>
     </section>
 
-    <section id="anchor-2-section" style="height: 800px;">
+    <section id="anchor-2" style="height: 800px; padding-top: 80px;">
       <hr />
-      <div class="tabs">
-        <bd-tabs-component id="anchor-2-section"></bd-tabs-component>
-      </div>
+      <bd-tabs-component></bd-tabs-component>
     </section>
 
-    <section id="anchor-3-section" style="height: 800px;">
+    <section id="anchor-3" style="height: 800px; padding-top: 80px;">
       <hr />
-      <bd-carousel-section title="Need help? We've got answers!" id="anchor-3-section">
+      <bd-carousel-section title="Need help? We've got answers!">
         <bd-carousel-item
           title="Scam Copilot Bot"
-          subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim"
-          modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim"
+          subTitle="AI chatbot for suspicious interaction detection"
           icon="/assets/light-carousel-img1.png"
         >
           <bd-h as="h4">Scam Copilot Bot</bd-h>
-          <bd-p kind="small">
-            Specialized AI chatbot that helps you identify suspicious online
-            interactions so you don't become a victim.
-          </bd-p>
-          <bd-p kind="small">
-            Specialized AI chatbot that helps you identify suspicious online
-            interactions so you don't become a victim.
-          </bd-p>
-          <bd-p kind="small">
-            Specialized AI chatbot that helps you identify suspicious online
-            interactions so you don't become a victim.
-          </bd-p>
-          <bd-h as="h6">Testare Scam Copilot</bd-h>
+          <bd-p kind="small">Helps identify suspicious online interactions.</bd-p>
         </bd-carousel-item>
       </bd-carousel-section>
     </section>
 
-    <section id="section-pricing" style="height: 800px;">
-      <bd-pricing-container id="section-pricing"></bd-pricing-container>
+    <section id="section-pricing" style="height: 800px; padding-top: 80px;">
+      <bd-pricing-container></bd-pricing-container>
     </section>
   </bd-container>
 `;
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  position: 'fixed',
+  theme   : 'light',
+  offset  : 0
+};
+
+export const Sticky = Template.bind({});
+Sticky.args = {
+  ...Default.args,
+  position: 'sticky'
+};
+
+export const DarkTheme = Template.bind({});
+DarkTheme.args = {
+  ...Default.args,
+  theme: 'dark'
+};
+
+export const WithOffset = Template.bind({});
+WithOffset.args = {
+  ...Default.args,
+  offset: 80
+};
+
+export const MinimalExample = () => html`
+  <bd-anchor-nav>
+    <bd-anchor-nav-item title="Home" id="home"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="About" id="about"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="Contact" id="contact"></bd-anchor-nav-item>
+  </bd-anchor-nav>
+
+  <bd-container>
+    <section id="home" style="height: 400px; padding-top: 80px;">
+      <bd-h as="h2">Home</bd-h>
+      <bd-p>Home section content.</bd-p>
+    </section>
+    
+    <section id="about" style="height: 400px;">
+      <bd-h as="h2">About</bd-h>
+      <bd-p>About section content.</bd-p>
+    </section>
+    
+    <section id="contact" style="height: 400px;">
+      <bd-h as="h2">Contact</bd-h>
+      <bd-p>Contact section content.</bd-p>
+    </section>
+  </bd-container>
+`;

package/src/components/back/back.css.js

@@ -11,7 +11,7 @@ export default css`
       font-family: var(--typography-fontFamily-sans);
       font-size: var(--typography-body-regular-fontSize);
       font-weight: var(--typography-fontWeight-bold);
-      color: var(--color-neutral-1000);
+      // color: var(--color-neutral-1000);
       cursor: pointer;
       border-radius: 0.5rem;
       transition: all 0.2s ease;