@repobit/dex-system-design 0.18.1 → 0.19.0

package/src/components/footer/footer.js

@@ -26,7 +26,6 @@ export class BdFooter extends LitElement {
     this.selectedCountry = 'Choose your country';
     this._isMobile = window.innerWidth <= 768;
     this._countriesContainer = null;
-    console.log('Constructor - isMobile:', this._isMobile, 'Window width:', window.innerWidth);
   }
 
   connectedCallback() {
@@ -51,16 +50,37 @@ export class BdFooter extends LitElement {
   updated(changedProps) {
     if (changedProps.has('currentLocale')) {
       this._updateNavLinks();
+      this._toggleImpressumVisibility();
     }
 
-    // Dacă s-a deschis lista de țări, fac scroll smooth către ea
     if (changedProps.has('_countriesOpen') && this._countriesOpen) {
-    // Obține referința la containerul cu țări doar când este deschis
       this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
       this._scrollToCountries();
     }
   }
 
+  _toggleImpressumVisibility() {
+    const showImpressum = this.locale === 'de-de' || this.locale === 'de';
+    const slot = this.shadowRoot.querySelector('slot[name="secondary-nav"]');
+    const assignedElements = slot?.assignedElements({ flatten: true }) || [];
+
+    if (assignedElements.length > 0) {
+      const footerNav = assignedElements[0];
+      const impressumLink = footerNav.querySelector('.impressum-link');
+      const impressumDivider = footerNav.querySelector('bd-divider-vertical + .impressum-link')?.previousElementSibling;
+
+      if (impressumLink) {
+      // Ascunde/afișează link-ul Impressum
+        impressumLink.style.display = showImpressum ? '' : 'none';
+
+        // Ascunde/afișează și separatorul dinaintea lui
+        if (impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL') {
+          impressumDivider.style.display = showImpressum ? '' : 'none';
+        }
+      }
+    }
+  }
+
   _scrollToCountries() {
   // Obține referința la container doar atunci când este necesar
     const container = this.shadowRoot.querySelector('.footer-countries-container');
@@ -217,28 +237,7 @@ export class BdFooter extends LitElement {
     }));
   }
 
-  renderQuickLinksSection(slotName) {
-    const assignedElements = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`)?.assignedElements({ flatten: true }) || [];
-    if (assignedElements.length === 0) return null;
 
-    const maxCols = this.maxColumnsPerRow || 3;
-    const rows = Math.ceil(assignedElements.length / maxCols);
-
-    const groupedRows = Array.from({ length: rows }, (_, rowIndex) => {
-      const start = rowIndex * maxCols;
-      return assignedElements.slice(start, start + maxCols);
-    });
-
-    return html`
-      <div class="quick-links-section" style="display: flex; flex-direction: column; gap: 1rem;">
-        ${groupedRows.map(row => html`
-          <div style="display: grid; grid-template-columns: repeat(${row.length}, 1fr); gap: 1rem;">
-            ${row.map(el => html`${el}`)}
-          </div>
-        `)}
-      </div>
-    `;
-  }
 
   get locale() {
     const val = (this.currentLocale || 'en').toLowerCase();
@@ -273,13 +272,11 @@ export class BdFooter extends LitElement {
       }
     });
   }
-
   render() {
     const year = new Date().getFullYear();
     const showAnpc = this.locale.startsWith('ro');
     const showImpressum = this.locale === 'de-de' || this.locale === 'de';
     const countriesList = this.getCountriesList();
-    console.log('Render - isMobile:', this._isMobile, 'Window width:', window.innerWidth);
 
     const masterbrandUrl = this._isMobile
       ? '/assets/Bitdefender-Masterbrand_mobile.png'
@@ -290,175 +287,175 @@ export class BdFooter extends LitElement {
       : '/assets/anpc.png';
 
     const logoUrl = '/assets/BD_logo.png';
-    const facebookIcon = '/assets/facebook_vector.png';
-    const xIcon = '/assets/x_vector.png';
-    const linkedinIcon = '/assets/linkedin_vector.png';
-    const youtubeIcon = '/assets/youtube_vector.png';
-    const instagramIcon = '/assets/instagram_vector.png';
-    const tiktokIcon = '/assets/tiktok_vector.png';
-    const leadingIcon = '/assets/leading.png';
-    const closeIcon = '/assets/close_icon.png'; // Adaugă un icon pentru butonul de închidere
+    const facebookIcon = '/assets/facebook_vector.svg';
+    const xIcon = '/assets/x_vector.svg';
+    const linkedinIcon = '/assets/linkedin_vector.svg';
+    const youtubeIcon = '/assets/youtube_vector.svg';
+    const instagramIcon = '/assets/instagram_vector.svg';
+    const tiktokIcon = '/assets/tiktok_vector.svg';
+    const leadingIcon = '/assets/leading.svg';
+    const closeIcon = '/assets/close_icon.png';
 
     const chunkSize = Math.ceil(countriesList.length / 3);
     const countryChunks = [
       countriesList.slice(0, chunkSize),
       countriesList.slice(chunkSize, chunkSize * 2),
       countriesList.slice(chunkSize * 2)
-
     ];
-
+    // Obține elementele din slot-ul quick-links
+    const quickLinksSlot = this.shadowRoot?.querySelector('slot[name="quick-links"]');
+    const quickLinksElements = quickLinksSlot?.assignedElements({ flatten: true }) || [];
+
+    // Extrage toate componentele bd-footer-links-group din slot
+    const linksGroups = [];
+    quickLinksElements.forEach(el => {
+      if (el.tagName === 'BD-FOOTER-LINKS-GROUP') {
+        linksGroups.push(el);
+      } else {
+      // Dacă este un container, extrage copiii săi
+        const children = el.querySelectorAll ? el.querySelectorAll('bd-footer-links-group') : [];
+        children.forEach(child => linksGroups.push(child));
+      }
+    });
     return html`
-    <div class="footer-top-bleed">
-      <div class="container">
-        <div class="footer-top">
-          <div class="footer-logo">
-            <slot name="logo">
-              <span><img src="${logoUrl}" alt="Bitdefender Logo"></span>
-            </slot>
-          </div>
-          <div class="footer-top-right">
-            <slot name="top-right">
-              <div slot="top-right">
-                <span slot="logo">
-                  <img src="${masterbrandUrl}" alt="Bitdefender Masterbrand">
-                </span>
-              </div>
-            </slot>
-          </div>
+  <div class="footer-top-bleed">
+    <div class="container">
+      <div class="footer-top">
+        <div class="footer-logo">
+          <slot name="logo">
+            <span><img src="${logoUrl}" alt="Bitdefender Logo"></span>
+          </slot>
+        </div>
+        <div class="footer-top-right">
+          <slot name="top-right">
+            <div slot="top-right">
+              <span slot="logo">
+                <img src="${masterbrandUrl}" alt="Bitdefender Masterbrand">
+              </span>
+            </div>
+          </slot>
         </div>
       </div>
     </div>
+  </div>
 
-    <footer class="container">
-      <bd-footer-nav bold>
-        <div class="footer-nav-main">
-          <a href="/${this.locale}/consumer/">For Consumer</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="/${this.locale}/small-business/">For Small Business</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="/${this.locale}/business/">For Enterprise</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="/${this.locale}/partners/">For Partners</a>
-        </div>
-      </bd-footer-nav>
-
-      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
-
-      <div class="footer-links">
-        <div class="footer-links-left">
-          <bd-footer-links-group slot="quick-links" title="Quick links">
-            <a href="https://central.bitdefender.com/?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">Bitdefender Central</a>
-            <a href="https://gravityzone.bitdefender.com/?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">GravityZone Cloud Control Center</a>
-            <a href="https://www.bitdefender.com/en-us/cyberpedia/">Bitdefender Cyberpedia</a>
-            <a href="https://pan.bitdefender.com/partners/save/?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">Partner Advantage Network Portal</a>
-            <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/104804?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">Brand Portal</a>
-          </bd-footer-links-group>
-
-          <bd-footer-links-group slot="quick-links">
-            <a href="https://www.bitdefender.com/consumer/support/">Support for Home Products</a>
-            <a href="https://www.bitdefender.com/business/support/">Support for Business Products</a>
-            <a href="/${this.locale}/company/">Investors</a>
-            <a href="/${this.locale}/company/job-opportunities/">Careers</a>
-            <a href="/${this.locale}/business/infozone/">InfoZone</a>
-          </bd-footer-links-group>
-        </div>
-        
-       <div class="footer-links-right social-icons">
-  <a href="https://www.facebook.com/bitdefender"><img src="${facebookIcon}" alt="Facebook"></a>
-  <a href="https://twitter.com/bitdefender"><img src="${xIcon}" alt="X"></a>
-  <a href="https://www.linkedin.com/company/bitdefender"><img src="${linkedinIcon}" alt="LinkedIn"></a>
-  <a href="https://www.youtube.com/c/Bitdefender"><img src="${youtubeIcon}" alt="YouTube"></a>
-  <a href="https://www.instagram.com/bitdefender/"><img src="${instagramIcon}" alt="Instagram"></a>
-  <a href="https://www.tiktok.com/@bitdefender"><img src="${tiktokIcon}" alt="TikTok"></a>
-</div>
+  <footer class="container">
+    <div class="footer-nav-main-container">
+      <slot name="nav"></slot>
+    </div>
+    <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+
+    <div class="footer-links">
+      <div class="footer-links-left">
+        <bd-grid 
+          cols="1" 
+          cols-sm="1" 
+          cols-md="2" 
+          cols-lg="2" 
+          gap="lg"
+          align="start"
+          justify="start"
+          padding="none"
+        >
+          <slot name="quick-links"></slot>
+        </bd-grid>
       </div>
+      
+      ${this._isMobile
+        ? html`<bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>`
+        : ''}
+      
+      <div class="footer-links-right social-icons">
+        <slot name="social-links">
+          <a href="https://www.facebook.com/bitdefender"><img src="${facebookIcon}" alt="Facebook"></a>
+          <a href="https://twitter.com/bitdefender"><img src="${xIcon}" alt="X"></a>
+          <a href="https://www.linkedin.com/company/bitdefender"><img src="${linkedinIcon}" alt="LinkedIn"></a>
+          <a href="https://www.youtube.com/c/Bitdefender"><img src="${youtubeIcon}" alt="YouTube"></a>
+          <a href="https://www.instagram.com/bitdefender/"><img src="${instagramIcon}" alt="Instagram"></a>
+          <a href="https://www.tiktok.com/@bitdefender"><img src="${tiktokIcon}" alt="TikTok"></a>
+        </slot>
+      </div>
+    </div>
 
-      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
-
-      <div class="footer-middle-line">
-         <bd-footer-nav>
-        <div class="footer-nav-main">
-          <a href="legal/">Legal Information</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="site/view/legal-privacy-policy-for-bitdefender-websites/">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="https://www.bitdefender.com/consumer/support/">Contact Us</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-            <a href="#">Privacy Settings</a>
-          ${showImpressum
-            ? html`
-            <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-            <a href="#" class="impressum-link">Impressum</a>
-          `
-            : ''}
-        </div>
-      </bd-footer-nav>
-        <div class="footer-address">
-          <slot name="address">
-            <div slot="address">
-              111 W. Houston Street, Suite 2105, Frost Tower Building<br />
-              San Antonio, Texas 78205
-            </div>
-          </slot>
-        </div>
+    ${!this._isMobile
+      ? html`<bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>`
+      : ''}
+
+    <div class="footer-middle-line">
+      <div class="secondary-nav-container">
+        <slot name="secondary-nav"></slot>
+        ${this._isMobile
+          ? html`<bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>`
+          : ''}
+      </div>
+      <div class="footer-address">
+        <slot name="address">
+          <div>
+            111 W. Houston Street, Suite 2105, Frost Tower Building<br />
+            San Antonio, Texas 78205
+          </div>
+        </slot>
       </div>
+    </div>
 
-      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+  <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+    
 
-      <div class="footer-extra">
-        <div class="footer-copy">Copyright © 1997 - ${year} Bitdefender</div>
-        ${showAnpc
-          ? html`
+    <div class="footer-extra">
+      <div class="footer-copy">
+        <slot name="copyright">
+          Copyright © 1997 - ${year} Bitdefender
+        </slot>
+      </div>
+      
+      ${showAnpc
+        ? html`
           <div class="footer-anpc">
             <slot name="anpc">
-              <div slot="anpc">
-                <img src="${anpcUrl}" alt="Certificat" />
-              </div>
+              <img src="${anpcUrl}" alt="Certificat" />
             </slot>
           </div>
         `
-          : null}
-        <div class="footer-countries-toggle">
-          <button class="country-toggle" @click="${this._toggleCountries}">
-            <img src="${leadingIcon}" alt="Leading icon">
-            ${this.selectedCountry}
-            <span class="arrow">
-              ${this._countriesOpen
-                ? html`<img src="/assets/arrow_up.png" alt="Arrow up">`
-                : html`<img src="/assets/arrow_down.png" alt="Arrow down">`}
-            </span>
-          </button>
-        </div>
+        : null}
+        
+      <div class="footer-countries-toggle">
+        <button class="country-toggle" @click="${this._toggleCountries}">
+          <img src="${leadingIcon}" alt="Leading icon">
+          ${this.selectedCountry}
+          <span class="arrow">
+            ${this._countriesOpen
+              ? html`<img src="/assets/arrow_up.svg" alt="Arrow up">`
+              : html`<img src="/assets/arrow_down.svg" alt="Arrow down">`}
+          </span>
+        </button>
       </div>
+    </div>
 
     ${this._countriesOpen
       ? html`
-    <div class="footer-countries-container">
-      <button class="close-countries-button" @click="${this._closeCountries}">
-        <img src="${closeIcon}" alt="Close countries list">
-      </button>
-      ${countryChunks.map(chunk => html`
-        <bd-footer-links-group slot="countries" title="${chunk === countryChunks[0] ? 'Choose your country' : ''}">
-          ${chunk.map(c => html`
-            <a href="/${c.locale.toLowerCase()}/" 
-               data-locale="${c.locale}" 
-               class="${this.selectedCountry === c.label ? 'selected' : ''}" 
-               @click="${(e) => this._handleCountryClick(e, c.label, c.locale)}">
-              ${c.label}
-            </a>
+        <div class="footer-countries-container">
+          <button class="close-countries-button" @click="${this._closeCountries}">
+            <img src="${closeIcon}" alt="Close countries list">
+          </button>
+          ${countryChunks.map(chunk => html`
+            <bd-footer-links-group slot="countries" title="${chunk === countryChunks[0] ? 'Choose your country' : ''}">
+              ${chunk.map(c => html`
+                <a href="/${c.locale.toLowerCase()}/" 
+                   data-locale="${c.locale}" 
+                   class="${this.selectedCountry === c.label ? 'selected' : ''}" 
+                   @click="${(e) => this._handleCountryClick(e, c.label, c.locale)}">
+                  ${c.label}
+                </a>
+              `)}
+            </bd-footer-links-group>
           `)}
-        </bd-footer-links-group>
-      `)}
-    </div>
-  `
+        </div>
+      `
       : null}
-    </footer>
-  `;
+  </footer>
+`;
   }
+
   static styles = [tokens, footerCSS];
 }
 

package/src/tokens/tokens.js

@@ -111,7 +111,6 @@ export const tokens = css`
         /* ================================
             CORE BORDER TOKENS
             ================================ */
-
         --border-width-0: 0;
         --border-width-1: 1px;
         --border-width-2: 2px;
@@ -127,9 +126,11 @@ export const tokens = css`
         --radius-2xl: 1rem; /* 16px */
         --radius-3xl: 1.5rem; /* 24px */
         --radius-full: 9999px;
+
         /* ================================
-            CORE DIMENSION TOKENS
-            ================================ */
+             CORE DIMENSION TOKENS
+             ================================ */
+
 
         --dimension-2px: 2px;
         --dimension-4px: 4px;
@@ -147,8 +148,8 @@ export const tokens = css`
         --dimension-64px: 64px;
 
         /* ================================
-            CORE TRANSITION TOKENS
-            ================================ */
+             CORE TRANSITION TOKENS
+             ================================ */
 
         --transition-duration-fast: 150ms;
         --transition-duration-normal: 200ms;
@@ -162,8 +163,8 @@ export const tokens = css`
         --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
         /* ================================
-            CORE SHADOW TOKENS
-            ================================ */
+             CORE SHADOW TOKENS
+             ================================ */
 
         --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
         --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -194,8 +195,8 @@ export const tokens = css`
         --focus-outline-offset: 2px;
 
         /* ================================
-            COMPONENT TOKENS - TYPOGRAPHY
-            ================================ */
+             COMPONENT TOKENS - TYPOGRAPHY
+             ================================ */
 
         /* Heading Tokens */
         --typography-heading-h1-fontSize: var(--typography-fontSize-5xl);
@@ -276,7 +277,7 @@ export const tokens = css`
         --typography-label-small-letterSpacing: var(--typography-letterSpacing-wide);
         --typography-label-small-fontFamily: var(--typography-fontFamily-sans);
 
-            --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
+        --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
 
         --typography-label-large-fontSize: var(--typography-fontSize-base);
         --typography-label-large-fontWeight: var(--typography-fontWeight-medium);
@@ -381,8 +382,8 @@ export const tokens = css`
         --typography-display-sm-fontFamily: var(--typography-fontFamily-sans);
 
         /* ================================
-            COMPONENT TOKENS - FORM
-            ================================ */
+             COMPONENT TOKENS - FORM
+             ================================ */
 
         /* Form Label Tokens */
         --form-label-default-fontSize: var(--typography-fontSize-sm);
@@ -472,8 +473,8 @@ export const tokens = css`
         --form-helpTextSpacing: var(--spacing-1);
 
         /* ================================
-            COMPONENT TOKENS - BUTTON
-            ================================ */
+             COMPONENT TOKENS - BUTTON
+             ================================ */
 
         /* Button Size Tokens */
         --button-small-height: var(--dimension-34px);
@@ -625,8 +626,8 @@ export const tokens = css`
         --button-focus-boxShadow: var(--shadow-focus-outline-blue);
 
         /* ================================
-            COMPONENT TOKENS - ANNOTATION
-            ================================ */
+             COMPONENT TOKENS - ANNOTATION
+             ================================ */
 
         /* Footnote Tokens */
         --footnote-reference-fontSize: 0.75em;
@@ -660,8 +661,8 @@ export const tokens = css`
         --math-subscript-marginLeft: 0.05em;
 
         /* ================================
-            COMPONENT TOKENS - ICON
-            ================================ */
+             COMPONENT TOKENS - ICON
+             ================================ */
 
         /* Icon Size Tokens */
         --icon-xs-size: var(--dimension-12px);
@@ -696,9 +697,9 @@ export const tokens = css`
         --icon-error-color: var(--color-red-500);
 
         /* ================================
-            CORE SPACING TOKENS
-            ================================ */
-
+             CORE SPACING TOKENS
+             ================================ */
+             
         --spacing-0: 0;
         --spacing-1: 0.0625rem; /* 1px */
         --spacing-2: 0.125rem; /* 2px */
@@ -784,29 +785,6 @@ export const tokens = css`
         /* Caption */
         --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
 
-        /* --spacing-0: 0;
-        --spacing-1: 1px;
-        --spacing-2: 2px;
-        --spacing-4: 4px;
-        --spacing-6: 6px;
-        --spacing-8: 8px;
-        --spacing-10: 10px;
-        --spacing-12: 12px;
-        --spacing-14: 14px;
-        --spacing-16: 16px;
-        --spacing-18: 18px;
-        --spacing-20: 20px;
-        --spacing-22: 22px;
-        --spacing-24: 24px;
-        --spacing-32: 32px;
-        --spacing-36: 36px;
-        --spacing-40: 40px;
-        --spacing-44: 44px;
-        --spacing-52: 52px;
-        --spacing-64: 64px;
-        --spacing-full: 99999999999999999999;
-        */
-
         /* Spacing Tokens
         -----------------------------------------------*/
         /* Base spacing tokens - Based on 4px grid */
@@ -1049,8 +1027,8 @@ export const tokens = css`
         --font-style-mono-normal: normal;
         --font-style-mono-italic: italic;
 
-        /* IBMPlexSans */
-        --typography-fontFamily-sans: "IBM Plex Sans", sans-serif;
+        /* IBM Plex Sans */
+        --typography-fontFamily-sans: 'IBM Plex Sans', sans-serif;
         --font-weight-sans-light: 300;
         --typography-body-large-fontWeight: 400;
         --font-weight-sans-medium: 500;

package/src/components/Button/icons.css

@@ -1,5 +0,0 @@
-.arrow-icon {
-  width: 24px;
-  height: 24px;
-  fill: #000;
-}