@repobit/dex-system-design 0.21.2 → 0.22.1

package/src/components/footer/footer-lp.stories.js

@@ -5,10 +5,31 @@ import '../footer/footer-nav-menu.js';
 import './footer-lp.js';
 
 export default {
-  title     : 'Components/Footer/BdFooterLP',
-  component : 'bd-footer-lp',
+  title        : 'Components/Footer/BdFooterLP',
+  component    : 'bd-footer-lp',
+  subcomponents: {
+    'bd-footer-nav'        : 'bd-footer-nav',
+    'bd-divider-vertical'  : 'bd-divider-vertical',
+    'bd-divider-horizontal': 'bd-divider-horizontal'
+  },
+  tags      : ['autodocs'],
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    docs  : {
+      description: {
+        component: 'A lightweight footer component designed specifically for landing pages. Features minimal content with essential legal links and privacy information in a compact layout.'
+      }
+    }
+  },
+  argTypes: {
+    maxColumnsPerRow: {
+      control    : { type: 'number', min: 1, max: 4 },
+      description: 'Maximum number of columns for link organization',
+      table      : {
+        type        : { summary: 'number' },
+        defaultValue: { summary: '3' }
+      }
+    }
   }
 };
 
@@ -31,4 +52,326 @@ export const Default = () => html`
     </bd-footer-nav>
   </bd-footer-lp>
 `;
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default landing page footer with essential legal and navigation links. Includes vertical dividers for clear separation between link items in a compact layout.'
+    }
+  }
+};
+
+export const MinimalLinks = () => html`
+  <bd-footer-lp maxColumnsPerRow="2">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Contact</a>
+    </bd-footer-nav>
+  </bd-footer-lp>
+`;
+MinimalLinks.parameters = {
+  docs: {
+    description: {
+      story: 'Minimal link version with only the most essential legal links. Perfect for simple landing pages where space is limited and only basic legal information is required.'
+    }
+  }
+};
+
+export const WithHorizontalDividers = () => html`
+  <div>
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+    <bd-footer-lp maxColumnsPerRow="3">
+      <bd-footer-nav slot="secondary-nav">
+        <a href="/legal/">Legal Information</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/privacy/">Privacy Policy</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/sitemap/">Site Map</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/company/">Company</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/contact/">Contact Us</a>
+      </bd-footer-nav>
+    </bd-footer-lp>
+  </div>
+`;
+WithHorizontalDividers.parameters = {
+  docs: {
+    description: {
+      story: 'Footer with horizontal divider above. Creates visual separation from the main content while maintaining the lightweight design suitable for landing pages.'
+    }
+  }
+};
+
+export const SingleColumnLayout = () => html`
+  <bd-footer-lp maxColumnsPerRow="1">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Site Map</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Company</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Contact Us</a>
+    </bd-footer-nav>
+  </bd-footer-lp>
+`;
+SingleColumnLayout.parameters = {
+  docs: {
+    description: {
+      story: 'Single column layout forcing all links into one line. Useful for very narrow layouts or mobile-first designs where horizontal space is limited.'
+    }
+  }
+};
+
+export const InternationalCompliance = () => html`
+  <bd-footer-lp maxColumnsPerRow="4">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/cookies/">Cookie Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/terms/">Terms of Service</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/gdpr/">GDPR</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/ccpa/">CCPA</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" class="impressum-link">Impressum</a>
+    </bd-footer-nav>
+  </bd-footer-lp>
+`;
+InternationalCompliance.parameters = {
+  docs: {
+    description: {
+      story: 'International compliance footer with expanded legal links. Includes GDPR, CCPA, and other regional compliance requirements for global landing pages.'
+    }
+  }
+};
+
+export const GermanLegal = () => html`
+  <bd-footer-lp maxColumnsPerRow="3">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Rechtliche Informationen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Datenschutzrichtlinie</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Sitemap</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Unternehmen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Kontakt</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Datenschutzeinstellungen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" class="impressum-link">Impressum</a>
+    </bd-footer-nav>
+  </bd-footer-lp>
+`;
+GermanLegal.parameters = {
+  docs: {
+    description: {
+      story: 'German language footer with legal requirements. Includes mandatory Impressum link and proper German translations for all legal and privacy terms.'
+    }
+  }
+};
 
+export const FrenchLegal = () => html`
+  <bd-footer-lp maxColumnsPerRow="3">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Informations légales</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Politique de confidentialité</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Plan du site</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Entreprise</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Contactez-nous</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Paramètres de confidentialité</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/cookies/">Gestion des cookies</a>
+    </bd-footer-nav>
+  </bd-footer-lp>
+`;
+FrenchLegal.parameters = {
+  docs: {
+    description: {
+      story: 'French language footer with proper translations. Includes cookie management link as commonly required for French and EU audiences.'
+    }
+  }
+};
+
+export const WithCopyright = () => html`
+  <bd-footer-lp maxColumnsPerRow="3">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Site Map</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Company</a>
+    </bd-footer-nav>
+    <div slot="copyright" style="text-align: center; padding-top: 1rem; color: white; font-size: 0.875rem;">
+      © 2024 Bitdefender. All rights reserved.
+    </div>
+  </bd-footer-lp>
+`;
+WithCopyright.parameters = {
+  docs: {
+    description: {
+      story: 'Footer with copyright notice. Uses the copyright slot to display copyright information below the main navigation links while maintaining the lightweight design.'
+    }
+  }
+};
+
+export const CompactMobile = () => html`
+  <bd-footer-lp maxColumnsPerRow="1">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Contact</a>
+    </bd-footer-nav>
+    <div slot="copyright" style="text-align: center; padding-top: 0.5rem; color: white; font-size: 0.75rem;">
+      © 2024 Bitdefender
+    </div>
+  </bd-footer-lp>
+`;
+CompactMobile.parameters = {
+  docs: {
+    description: {
+      story: 'Ultra-compact mobile-optimized footer. Uses single column layout with minimal links and smaller font sizes, perfect for mobile landing pages with limited space.'
+    }
+  }
+};
+
+export const CustomizableFooterLP = (args) => html`
+  <bd-footer-lp maxColumnsPerRow="${args.maxColumnsPerRow}">
+    <bd-footer-nav slot="secondary-nav">
+      ${args.showLegal
+        ? html`
+        <a href="/legal/">Legal Information</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      `
+        : ''}
+      ${args.showPrivacy
+        ? html`
+        <a href="/privacy/">Privacy Policy</a>
+        ${args.showSitemap || args.showCompany || args.showContact
+          ? html`
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        `
+          : ''}
+      `
+        : ''}
+      ${args.showSitemap
+        ? html`
+        <a href="/sitemap/">Site Map</a>
+        ${args.showCompany || args.showContact
+          ? html`
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        `
+          : ''}
+      `
+        : ''}
+      ${args.showCompany
+        ? html`
+        <a href="/company/">Company</a>
+        ${args.showContact
+          ? html`
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        `
+          : ''}
+      `
+        : ''}
+      ${args.showContact
+        ? html`
+        <a href="/contact/">Contact Us</a>
+      `
+        : ''}
+    </bd-footer-nav>
+    ${args.showCopyright
+      ? html`
+      <div slot="copyright" style="text-align: center; padding-top: 1rem; color: white; font-size: 0.875rem;">
+        © 2024 Bitdefender. All rights reserved.
+      </div>
+    `
+      : ''}
+  </bd-footer-lp>
+`;
+CustomizableFooterLP.args = {
+  maxColumnsPerRow: 3,
+  showLegal       : true,
+  showPrivacy     : true,
+  showSitemap     : true,
+  showCompany     : true,
+  showContact     : true,
+  showCopyright   : false
+};
+CustomizableFooterLP.argTypes = {
+  maxColumnsPerRow: {
+    control: { type: 'number', min: 1, max: 4 }
+  },
+  showLegal: {
+    control    : 'boolean',
+    description: 'Show Legal Information link'
+  },
+  showPrivacy: {
+    control    : 'boolean',
+    description: 'Show Privacy Policy link'
+  },
+  showSitemap: {
+    control    : 'boolean',
+    description: 'Show Site Map link'
+  },
+  showCompany: {
+    control    : 'boolean',
+    description: 'Show Company link'
+  },
+  showContact: {
+    control    : 'boolean',
+    description: 'Show Contact Us link'
+  },
+  showCopyright: {
+    control    : 'boolean',
+    description: 'Show copyright notice'
+  }
+};
+CustomizableFooterLP.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive landing page footer with customizable options. Use the controls panel to toggle different links and adjust the layout to create the perfect footer for your landing page needs.'
+    }
+  }
+};
+
+export const PrivacyFocused = () => html`
+  <bd-footer-lp maxColumnsPerRow="2">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/privacy/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/cookies/">Cookie Preferences</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/legal/">Legal</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" onclick="window.__tcfapi('showUi', null); return false;">Privacy Settings</a>
+    </bd-footer-nav>
+  </bd-footer-lp>
+`;
+PrivacyFocused.parameters = {
+  docs: {
+    description: {
+      story: 'Privacy-focused footer with enhanced cookie and privacy controls. Includes interactive privacy settings link and emphasizes data protection compliance for privacy-conscious audiences.'
+    }
+  }
+};

package/src/components/footer/footer.js

@@ -33,7 +33,6 @@ export class BdFooter extends LitElement {
     super.connectedCallback();
     this._initLocaleFromUrl();
     window.addEventListener('resize', this._handleResize.bind(this));
-    console.log('Connected - isMobile:', this._isMobile);
   }
 
   disconnectedCallback() {
@@ -100,11 +99,9 @@ export class BdFooter extends LitElement {
   _handleResize() {
     this._isMobile = window.innerWidth <= 767;
     const newIsMobile = window.innerWidth <= 767;
-    console.log('Resize - Old isMobile:', this._isMobile, 'New isMobile:', newIsMobile, 'Window width:', window.innerWidth);
 
     if (this._isMobile !== newIsMobile) {
       this._isMobile = newIsMobile;
-      console.log('isMobile changed to:', this._isMobile);
     }
   }
 

package/src/components/footer/footer.stories.js

@@ -2,10 +2,30 @@ import { html } from 'lit';
 import './footer.js';
 
 export default {
-  title     : 'Components/Footer/BdFooter',
-  component : 'bd-footer',
+  title        : 'Components/Footer/BdFooter',
+  component    : 'bd-footer',
+  subcomponents: {
+    'bd-footer-nav'        : 'bd-footer-nav',
+    'bd-footer-links-group': 'bd-footer-links-group'
+  },
+  tags      : ['autodocs'],
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    docs  : {
+      description: {
+        component: 'A comprehensive footer component with multi-language support, organized link sections, and responsive layout. Perfect for corporate websites with international audiences.'
+      }
+    }
+  },
+  argTypes: {
+    maxColumnsPerRow: {
+      control    : { type: 'number', min: 1, max: 4 },
+      description: 'Maximum number of columns per row in the quick links section',
+      table      : {
+        type        : { summary: 'number' },
+        defaultValue: { summary: '3' }
+      }
+    }
   }
 };
 
@@ -53,6 +73,13 @@ export const Default = () => html`
     </bd-footer-nav>
   </bd-footer>
 `;
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default English footer with complete navigation structure. Includes main audience navigation, quick links sections, and secondary legal links with proper vertical dividers.'
+    }
+  }
+};
 
 export const Romanian = () => html`
   <bd-footer maxColumnsPerRow="3">
@@ -97,6 +124,13 @@ export const Romanian = () => html`
     </bd-footer-nav>
   </bd-footer>
 `;
+Romanian.parameters = {
+  docs: {
+    description: {
+      story: 'Romanian language footer with localized content. Demonstrates internationalization support with proper Romanian translations for all navigation items and link groups.'
+    }
+  }
+};
 
 export const German = () => html`
   <bd-footer maxColumnsPerRow="3">
@@ -143,6 +177,13 @@ export const German = () => html`
     </bd-footer-nav>
   </bd-footer>
 `;
+German.parameters = {
+  docs: {
+    description: {
+      story: 'German language footer with complete localization. Includes German-specific legal requirements like Impressum and proper translations for all user-facing text.'
+    }
+  }
+};
 
 export const WithDividers = () => html`
   <div>
@@ -174,4 +215,226 @@ export const WithDividers = () => html`
     <bd-divider-horizontal width="95%"></bd-divider-horizontal>
     <bd-divider-horizontal width="95%"></bd-divider-horizontal>
   </div>
-`;
+`;
+WithDividers.parameters = {
+  docs: {
+    description: {
+      story: 'Footer demonstration with additional horizontal dividers. Shows how the footer integrates with other divider components to create visual separation in page layouts.'
+    }
+  }
+};
+
+export const MinimalFooter = () => html`
+  <bd-footer maxColumnsPerRow="2">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/en/consumer/">For Consumer</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/business/">For Business</a>
+    </bd-footer-nav>
+    
+    <bd-footer-links-group slot="quick-links" title="Resources">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://www.bitdefender.com/consumer/support/">Support</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Contact</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
+MinimalFooter.parameters = {
+  docs: {
+    description: {
+      story: 'Minimal footer variant with reduced content. Ideal for landing pages or simpler site sections where a full footer is not required.'
+    }
+  }
+};
+
+export const SingleColumnLayout = () => html`
+  <bd-footer maxColumnsPerRow="1">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/en/consumer/">For Consumer</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/small-business/">For Small Business</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/business/">For Enterprise</a>
+    </bd-footer-nav>
+    
+    <bd-footer-links-group slot="quick-links" title="All Links">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone</a>
+      <a href="https://www.bitdefender.com/consumer/support/">Support for Home</a>
+      <a href="https://www.bitdefender.com/business/support/">Support for Business</a>
+      <a href="/company/">Company</a>
+      <a href="/careers/">Careers</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Contact Us</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
+SingleColumnLayout.parameters = {
+  docs: {
+    description: {
+      story: 'Single column footer layout. Forces all quick links into one column, useful for narrow layouts or mobile-optimized designs.'
+    }
+  }
+};
+
+export const FourColumnLayout = () => html`
+  <bd-footer maxColumnsPerRow="4">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/en/consumer/">For Consumer</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/small-business/">For Small Business</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/business/">For Enterprise</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/partners/">For Partners</a>
+    </bd-footer-nav>
+    
+    <bd-footer-links-group slot="quick-links" title="Platforms">
+      <a href="https://central.bitdefender.com/">Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone</a>
+      <a href="https://www.bitdefender.com/cyberpedia/">Cyberpedia</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links" title="Support">
+      <a href="https://www.bitdefender.com/consumer/support/">Home Products</a>
+      <a href="https://www.bitdefender.com/business/support/">Business Products</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links" title="Company">
+      <a href="/company/">About</a>
+      <a href="/careers/">Careers</a>
+      <a href="/investors/">Investors</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links" title="Resources">
+      <a href="/blog/">Blog</a>
+      <a href="/news/">News</a>
+      <a href="/events/">Events</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/privacy/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Site Map</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/contact/">Contact</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
+FourColumnLayout.parameters = {
+  docs: {
+    description: {
+      story: 'Four column footer layout. Maximizes horizontal space usage for wide screens with multiple categorized link groups in a dense but organized arrangement.'
+    }
+  }
+};
+
+export const CustomizableFooter = (args) => html`
+  <bd-footer maxColumnsPerRow="${args.maxColumnsPerRow}">
+    <bd-footer-nav slot="nav" class="footer-nav-main" ?bold="${args.boldNav}">
+      <a href="/en/consumer/">For Consumer</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/small-business/">For Small Business</a>
+      ${args.showEnterprise
+        ? html`
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/business/">For Enterprise</a>
+      `
+        : ''}
+      ${args.showPartners
+        ? html`
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/partners/">For Partners</a>
+      `
+        : ''}
+    </bd-footer-nav>
+    
+    ${args.showQuickLinks
+      ? html`
+      <bd-footer-links-group slot="quick-links" title="${args.quickLinksTitle}">
+        <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+        <a href="https://gravityzone.bitdefender.com/">GravityZone</a>
+        ${args.showCyberpedia ? html`<a href="https://www.bitdefender.com/cyberpedia/">Cyberpedia</a>` : ''}
+      </bd-footer-links-group>
+    `
+      : ''}
+
+    ${args.showSecondaryNav
+      ? html`
+      <bd-footer-nav slot="secondary-nav">
+        <a href="/legal/">Legal Information</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/privacy/">Privacy Policy</a>
+        ${args.showContact
+          ? html`
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="/contact/">Contact Us</a>
+        `
+          : ''}
+      </bd-footer-nav>
+    `
+      : ''}
+  </bd-footer>
+`;
+CustomizableFooter.args = {
+  maxColumnsPerRow: 3,
+  boldNav         : true,
+  showEnterprise  : true,
+  showPartners    : true,
+  showQuickLinks  : true,
+  quickLinksTitle : 'Quick Links',
+  showCyberpedia  : true,
+  showSecondaryNav: true,
+  showContact     : true
+};
+CustomizableFooter.argTypes = {
+  maxColumnsPerRow: {
+    control: { type: 'number', min: 1, max: 4 }
+  },
+  boldNav: {
+    control: 'boolean'
+  },
+  showEnterprise: {
+    control: 'boolean'
+  },
+  showPartners: {
+    control: 'boolean'
+  },
+  showQuickLinks: {
+    control: 'boolean'
+  },
+  quickLinksTitle: {
+    control: 'text'
+  },
+  showCyberpedia: {
+    control: 'boolean'
+  },
+  showSecondaryNav: {
+    control: 'boolean'
+  },
+  showContact: {
+    control: 'boolean'
+  }
+};
+CustomizableFooter.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive footer with customizable options. Use the controls panel to toggle different sections and adjust the layout to see how the footer adapts to various configurations.'
+    }
+  }
+};